Open kangyana opened 2 years ago
Hook 是 React16.8 的新增特性。 Hook 可以让你不必写 class 组件也能使用 state 等 React 特性。
Hook
class
state
Hook 解决了许多 组件问题：
React 没有提供将复用逻辑加到组件里的方案。 class 组件的复用方案是 render props 和 HOC，这些方案需要你重写组件结构。 在 React DevTools 中，由 providers，consumers，HOC，render props 等其他抽象层组成的组件会形成 嵌套地狱，非常不利于观摩。
render props
HOC
React DevTools
providers
consumers
自定义 Hook 可以提取复用状态逻辑，使你无需修改组件结构即可使用复用。
状态逻辑和副作用充斥，每个 生命周期 常常包含一些不相关的逻辑。 例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。 但是，在 componentDidMount 中可能需要处理其他逻辑，例如事件监听并在 componentWillUnmount 中取消。 完全不相关的代码放在同一个生命周期里，后续维护不那么明了。
生命周期
componentDidMount
componentDidUpdate
componentWillUnmount
Hook 组件可以使用 Effect 将关联代码拆成更小的函数，并非是死板的 生命周期。
Effect
你必须去理解 this 的工作方式，才能很好的使用 class。
this
Hook 这种函数式组件，以很低的使用成本就可以写出好组件。
1. 为什么使用 Hook？
Hook是 React16.8 的新增特性。Hook可以让你不必写class组件也能使用state等 React 特性。Hook解决了许多 组件问题：2. 在组件之间复用状态逻辑很难
React 没有提供将复用逻辑加到组件里的方案。
class组件的复用方案是render props和HOC，这些方案需要你重写组件结构。 在React DevTools中，由providers，consumers，HOC，render props等其他抽象层组成的组件会形成 嵌套地狱，非常不利于观摩。自定义
Hook可以提取复用状态逻辑，使你无需修改组件结构即可使用复用。3. 复杂组件变得难以理解
状态逻辑和副作用充斥，每个
生命周期常常包含一些不相关的逻辑。 例如，组件常常在componentDidMount和componentDidUpdate中获取数据。 但是，在componentDidMount中可能需要处理其他逻辑，例如事件监听并在componentWillUnmount中取消。 完全不相关的代码放在同一个生命周期里，后续维护不那么明了。Hook组件可以使用Effect将关联代码拆成更小的函数，并非是死板的生命周期。4. 难以理解的 class
你必须去理解
this的工作方式，才能很好的使用class。Hook这种函数式组件，以很低的使用成本就可以写出好组件。