Hook必知必会

目录

Hook解决了什么？

React没有提供将可复用性行为“附加”到组件的途径。（例如，把组件连接到 store）

1. 问题：组件之间复用状态逻辑很难

在hook出现之前，组件复用一般采用Render Props 和 高阶组件HOC，这类方案需要重新组织你的组件结构，让代码看起来难以理解。React DevTools 中你会发现，由这些抽象层组成的组件会形成“嵌套地狱”。由此可见，React 需要为共享状态逻辑提供更好的原生途径

解决：Hook 使你在无需修改组件结构的情况下复用状态逻辑
2. 问题：组件中各种不相关的逻辑混杂

我们经常会这样，比如组件常常在 componentDidMount 和 componentDidUpdate 中获取数据，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。

解决：Hook 将组件中相互关联的部分拆分成更小的函数

比如：使用useEffect Hook，你可以把组件内相关的副作用组织在一起（例如创建订阅及取消订阅），而不要把它们拆分到不同的生命周期函数里。同时我们又可以使用多个 Effect 实现关注点分离，将不相关的逻辑分离到了多个Effect中。

3. 无需在使用函数组件还是class组件间苦恼

Hook 使你在非 class 的情况下可以使用更多的 React 特性。

因此，hook是为了解决一类问题出现，它让我们拥抱了函数，更灵活的让组件实现状态逻辑复用。将相关联逻辑行为更集中在更小的函数中处理。

Hook的基本使用

1. useState() 在函数组件引入状态的钩子
2. useEffect() 在函数组件中增加操作副作用的操作

const Fruits = () => {
   
    const [fruits, setFruits] = useState(['苹果', '香蕉'])
    const [fruit, setFruit