useEffect 浅析
发布网友
共1个回答
热心网友
这篇文章探讨了React Hooks中`useEffect`的原理和实践应用，从常量的state和props、每次渲染都有的`useEffect`、非生命周期以及如何在Hooks里访问最新值等多个方面进行了解析。首先，我们看到在Hooks中，每次渲染时state和props都是常量，每个`useEffect`都会得到属于那次渲染的特定状态值。这是因为设计原则是为了保证在一次渲染中，状态和事件处理函数都是一次性的，类似于使用完一次性筷子就扔掉的概念。其次，`useEffect`在每一次渲染中都有的存在，这意味着每次渲染都会有自己的`useEffect`函数，它会接收到属于那次渲染的特定状态值。与之相对，class组件中的`this.setState`则总是获取最新的状态值。
在`useEffect`中访问最新值，可以通过使用`ref`实现类似class组件的效果。在Hooks中，`ref`作为组件内部的不变引用，每次更新后就会将最新的状态值传入`ref.current`，从而达到模拟class组件的效果。
讨论中还提到了`useEffect`的清理工作，与类组件的`componentWillUnmount`类似，但在Hooks中需要明确进行清理，以避免内存泄漏。对于状态修改和生命周期的关系，文章强调应基于状态修改而非生命周期进行思考，这是学习Hooks时的一个重要心智模式转变。`useEffect`之所以能够模拟一些生命周期行为，是因为它关注数据改变时需要执行的操作，而生命周期关注的是在特定状态或属性改变时对数据的处理。
文章还探讨了如何进行效果的清理，以及在`useEffect`中进行依赖项的设置，强调了依赖项原则和如何避免不必要的`useEffect`调用。在依赖项的设置上，文章提供了最佳实践和错误案例分析，包括使用`useCallback`对数据请求函数进行缓存，以避免在依赖改变时重复创建函数。
最后，文章建议在数据请求需要依赖于state或props时，将数据请求代码直接写在`useEffect`内部（最佳方案），如果数据请求是一个单纯的请求，可以考虑在外部执行。如果必须将依赖数据的数据请求放在外部，可以使用`useCallback`来缓存函数，仅当内部依赖改变时才更新函数。文章还推荐了关于自定义Hooks的资源，以供读者在项目中探索和实现自定义Hooks。
