Effect Hook
- 副作用: 数组获取、设置订阅、手动修改Reac组件中的DOM都属于副作用
- 可以把 useEffect 看做 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个函数的结合
- 简单示例:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect 做了什么? 通过使用这个 Hook,你可以告诉 React 组件需要在渲染后执行某些操作。
**为什么在组件内部调用 useEffect?**为了直接访问 state变量 或其他 props,而不要调用其他API
useEffect 会在每次渲染后都执行吗? 默认情况下是的
- 具体示例
//一、
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
//二、
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
- useEffect 第二个参数数组是可选的;
- 没有数组:每次渲染都会执行
- 空数组:只有挂载和销毁的时候执行
- 数组有值:值(依赖)变化的时候执行;
- useEffect return的函数 相当于componentWillUnMount,销毁的时候执行
- 执行时机:传给 useEffect 的函数会在浏览器完成布局与绘制之后,在一个延迟事件中被调用。异步
useLayoutEffect
- 与useEffect基本一致;但执行时机不同
- 执行时机:它会在所有DOM变更之后 同步 调用effect。可以使用它来读取DOM布局并同步触发重新渲染。 在浏览器执行绘制之前,useLayoutEffect内部的更新计划将会被同步刷新;
- 比如要更改关于布局或者样式的情况下,使用useEffect,由于其执行机制是异步的、可能会造成一闪而过的效果;换成使用useLayoutEffect 就不会有这样的问题