什么是 hooks

hooks 可以让你在不便携 class 的情况下，使用 state 一家其他的 React 特性。

hooks 解决了什么问题

  • 大大降低了复用逻辑的难度，只能用高阶组件
  • 函数组件的不能更改 state 的缺陷
  • 解决了 class 组件代码量太大的问题
  • 配合 render props，代码将更为清晰简洁

基本 hooks 使用

useState 特性

  • 返回 state 个更改 state 的方法
  • 函数第一次执行时，state 得到的是默认值
  • 再次执行，count 得到的是更新的值
  • useState 只能按顺序定义在函数顶部，不能包裹在逻辑判断内，具体原因，源码的时候会看到
  • useState 的简单实现
  • setSate 可以传递 function

useEffect 特性

  • 依赖数组为空数组时，相当与生命周期的 componentDidMount，只执行一次
  • 依赖数组不为空时，在 render 的时候，只有依赖中的值发生变化才会执行 callback,这一点和 useCallBack 类似
  • 如果不传依赖数组，每次更新都会执行 callback
  • 当 useEffect 返回一个 callback 时，相当与卸载 componentWillUnMount 生命周期

useReducer+useContext 可以实现 redux 状态管理，因为 redux 作者，已经在 react 源码部门任职，hooks 更新，就借鉴了 redux 的思想，源码里也会看到

说的太少了，再放一些简单用法吧

class 组件的 PureComponent，在 hooks 里的用法：

function Child({ props }) {
    console.log('I am Rendering');
    return (
        <div>I am update Every {props.name}</div>
    )
}
export default React.memo(Child);
0