React Hooks相关

Posted 2022-11-23 dfqin

一、React在16.8推出了Hooks特性，React Native是在0.59版本开始支持，官方解释了推出Hooks的原因(官方文档)：

1、组件间状态逻辑难以复用。之前通常使用高阶组件来解决这种问题，但是这种方式通常需要改变你的组件结构，并且会导致组件嵌套地狱，导致代码难以追踪。使用Hooks可以从组件中抽取状态逻辑，可以单独测试，也可以复用。Hooks可以让你在不改变组件结构的情况下实现状态逻辑复用( Hooks allow you to reuse stateful logic without changing your component hierarchy)。

2、复杂组件难以理解。一些组件随着业务迭代会添加越来越多的状态逻辑，在生命周期方法中通常包含一堆不相干的逻辑，这样的话很容易引入bug。很多状态逻辑都跟声明周期相关，所以这些代码也不好拆分。Hooks允许根据功能把一个组件拆分为更小的函数，而不用被迫去拆分生命周期函数。

3、不用再考虑this的指向问题。因为在js中this的使用与其他语言不同，这会提高使用react的学习成本，并且容易出错。而使用Hooks可以不依赖class使用React的特性。

二、当然使用Hooks也有一些缺点：

1、闭包陷阱，可以参考以下文章：闭包陷阱 ，主要是一些异步回调中拿到的state值通常不是最新值，通常需要使用useRef来解决。

三、实现原理：TODO

参考文档：https://segmentfault.com/a/1190000038431635

https://segmentfault.com/a/1190000039171753?utm_source=sf-similar-article

谈谈react hooks的优缺点 - 知乎