文章目录

Effect Hook概念性内容介绍：

  • Effect Hook可以让你在函数组件中执行副作用操作。
    PS：副作用操作包括：
    1. 数据获取
    2. 设置定义
    3. 手动更改React组件中的DOM
    4. 。。。
  • Effect Hook可以把它当作是componentDidMount,componentDidUpdate和componentWillUnmount这三个生命周期的组合。（组件渲染，更新，销毁）
  • 在组件内部我们可以在useEffect中直接访问state变量或是props。我们不需要特殊的API来读取它 – 它已经保存在函数作用域中。Hook使用了JavaScript的闭包机制，而不用在JavaScript已经提供了解决方案的情况下，还引入特定的React API。

PS：React组件中有俩种常见的副作用操作：一种是需要清除的，一种是不需要清除的。
无需清除的effect：
比如我们只想在React更新DOM之后运行一些额外的代码。比如发送网络请求，手动变更DOM，记录日志，这些都是常见的无需清除的操作。因为在执行完这些操作之后，就可以忽略它们了。
需要清除的effect：
比如订阅外部数据源。这种情况清除工作是非常重要的，可以防止引起内存泄漏！

如果朋友们想在里面进行异步操作的话请这样用【或者你可以把这个方法放到外面在这里调用即可】：

useEffect(() => {
	async function asyncRequest() {
		//请自己将getData换成你自己的异步请求
		const res = await getData();
		console.log(res)
	}
	asyncRequest();
}, [])

我们可以监听某个状态的变化来进行一些操作

function Test() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log('count变化了，我们可以在这里做些什么')
	}, [count])
	return (
		<button onClick={() => setCount(count+1)}>
			{count}
			更改count
		</button>
	)
}

useEffect vs useLayoutEffect

下面是何时使用它们的简单规则。

这两种方法都可以用来做基本相同的事情，但是它们的用例稍有不同。这里有一些规则供您在决定使用哪个React Hook时参考。

useEffect
99%的情况下，这是你想要使用的。当hooks是稳定的，并且如果您重构任何类组件来使用钩子，那么您可能会将任何代码从componentDidMount、componentDidUpdate和componentWillUnmount移到useEffect。

有一个问题是，它在react呈现组件之后运行，并确保您的效果回调不会阻塞浏览器绘图。这与类组件中的行为不同，在类组件中，componentDidMount和componentDidUpdate在呈现后同步运行。这样更有性能，大多数时候这就是你想要的。

但是，如果您的效果正在改变DOM(通过一个DOM节点ref)，并且DOM变化将在呈现DOM节点和您的效果改变它之间改变它的外观，那么您不希望使用useEffect。你需要使用useLayoutEffect。否则，当DOM变化生效时，用户可能会看到闪烁。这是你唯一想要避免使用效果而使用useLayoutEffect的时候。

useLayoutEffect
在React执行完所有DOM突变后，它立即同步运行。如果您需要进行DOM度量(比如获取元素的滚动位置或其他样式)，然后进行DOM更改或通过更新状态触发同步重新呈现，那么这将非常有用。

就调度而言，这与componentDidMount和componentDidUpdate的工作方式相同。您的代码在DOM更新后立即运行，但在浏览器有机会“绘制”这些更改之前(用户实际上直到浏览器重新绘制后才会看到更新)。

总结
useLayoutEffect：如果需要修改DOM和/或确实需要执行度量
useEffect：如果您根本不需要与DOM交互，或者您的DOM更改是不可观察的(说真的，大多数时候您应该使用这个)。