React Hooks个人使用总结

516 阅读2分钟

我努力把我所理解的hooks总结在这里,不涉及具体某个hooks的使用方法,但试图理清 hooks 背后的逻辑。算是自己的一点使用心得~

Why?

我认为理解一个概念或者是学习一个特性,最重要的是知道它要解决什么问题,适用什么场景?这样才能更清楚地知道什么时候该用它,以及如何用它。

那么 Hooks 引入要解决的问题是什么呢?

官方文档和社区文章都说了很多。我认为最重要的其实就是简单一句话:

在函数组件中引入状态

How?

上面说了,hooks 是为了在函数组件中引入状态。

可是如何引入?每次调用函数,其中所有操作都会重新执行一遍,包括变量的声明与赋值。

因此,要在函数组件中引入状态,需要把状态存在函数之外。

这就是为什么要使用 useState/useEffect/useMemo 等 hooks 来保存状态。

那每次重新进入函数时,React 又怎么知道这时候要读取之前存的 state 呢?

方案很简单:

把之前的状态存在队列中,按顺序去拿。

这就是为什么 Hooks 需要在函数开头使用,以及 Hooks 不可以在 if/for 块中使用,如果在条件或循环语句中使用 hooks,那么就没办法保证之后的每一次函数的执行都是按顺序调用 hooks 的。

What?

有人会问,如何把之前 class 组件的使用习惯迁移到 hooks?

我个人认为:最重要的是思维方式的转变,你要知道:每一次 render 都会重新执行 function,如果要保存状态就用 hooks,如果有副作用就用 useEffect,尽管抛弃生命周期/this之类的概念。彻底转到函数的思维模式,你会发现 hooks 写起来非常愉快。

状态管理

我个人很烦 Redux……简简单单一个东西搞得过于复杂。所以 hooks 出现后我就果断抛弃了 Redux。 useReducer + useContext 完美解决相关问题~

掘金上相关文章很多,我就先不赘述了。如果之后有兴趣总结一下就再写篇文章

使用技巧

其实如 What? 章所说,没什么具体的技巧,思维方式转过来了就一切ok。

这里暂时先空着。想到具体的操作事项再补充

参考补充:react.docschina.org/blog/2020/0…