🛑 停止思考 React 生命周期方法。

在这篇文章中，让我们讨论一下 ReactJs 中从生命周期方法到状态同步和钩子的范式转变。

当类组件在 ReactJs 中存在时（现在仍然如此，但没有人再喜欢它们了），我们会在挂载、卸载和生命周期方法方面进行很多思考。

每当类组件挂载时，生命周期方法都会按以下顺序调用：构造函数→渲染→DOM 和 refs 更新→componentDidMount

但后来出现了 React Hooks，我们开始从依赖数组的角度思考。

我们经常会问：

与[某些生命周期方法]等效的钩子是什么？

简单的回答是，钩子是一种范式转变，从“生命周期”思维转变为“状态和与 DOM 同步”思维。

尝试采用旧范式并将其应用于钩子并不能取得很好的效果，而且可能会阻碍你的发展。

useEffect(fn) // fn invoked on all updates

useEffect(fn, []) // invoked on mount

useEffect(fn, [a, b, c]) // invoked if any of the members of the array are updated

上面的代码片段并不是思考 React hook 的正确方式。

生命周期已经消失，但我们仍然认为带有空 dep 数组的 useEffect 是 componentDidMount，而这并不是思考 React Hooks 的正确方式。

现在我想向你介绍思考 React Hooks 的正确方法。

状态同步

瞧，问题不是“这个效果什么时候运行”，而是“这个效果与哪个状态同步”

useEffect(fn) // useEffect with no dep array, sync with all state

useEffect(fn, []) // useEffect with empty dep array, sync with no state

useEffect(fn, [stateA, stateB]) // useEffect with stateA and stateB in dep array sync with stateA and stateB.

这就是您应该思考 React Hooks 的方式。

希望您发现这个视频有用，如果是这样，请务必通过订阅来表示您的支持。

我还运营着一份每周新闻通讯，因此您也可以通过那里加入我：https://swastikyadav.com

谢谢你！