react hooks知识集

react hooks 知识集

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
那么关于hooks有哪些疑问呢？

React为什么要搞一个Hooks？

想要复用一个有状态的组件太麻烦了！
我们都知道react都核心思想就是，将一个页面拆成一堆独立的、可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。
官方解决这个问题的办法是使用渲染属性（Render Props） 和高阶组件（Highter-Order Components）。

渲染属性：渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到我们的DataProvider组件包含了所有跟状态相关的代码，而Cat组件则可以是一个单纯的展示型组件，这样一来DataProvider就可以单独复用了。
高阶组件： 说白了就是一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件。看下面的代码示例，withUser函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能。

hooks主要有两个作用：

1. 用于在函数组件中引入状态管理和生命周期方法。
2. 取代高阶组件和render props来实现抽象和可重用性。

Hooks带来了那些优点？

1. 生命周期钩子函数可以先丢一边了，用useEffects不用记生命周期方法。
2. 不像class组件的state，可自定义和跨组件重用。
3. 代码更干净，简洁易懂，无需复杂的DOM结构，更容易将组件的 UI 与状态分离。
4. 没有破坏性改动。完美融合老版本Class写法，不需要重写任何已有代码就可以在一些组件中尝试 Hook。
5. 使用class组件，需要理解 JavaScript 中 this 的工作方式，不能忘记绑定事件处理器等操作，代码复杂且冗余。拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。也不需要去考虑this指向问题。

Hooks 使用规则

1. 只在顶层使用 Hooks，不能在循环, 条件或者嵌套的函数中使用。
2. 只在React的函数组件(function Component)中调用Hooks，在类组件(class Component)中无法使用，常规 JavaScript 函数中也不要调用 Hook。
3. 对于自定义Hooks，使用use开头命名。
4. eslint-plugin-react-hooks该插件可以规范hooks写法。
5. React 靠的是 Hook 调用的顺序来对应state和useState，所以一定要注意。

react生命周期方法如何对应于 Hooks ？

函数组件 的本质是函数，没有 state 的概念的，因此不存在生命周期一说，仅仅是一个 render 函数而已。
但是引入 Hooks 之后就变得不同了，它能让组件在不使用 class 的情况下拥有 state，所以就有了生命周期的概念，所谓的生命周期其实就是 useState、 useEffect() 和 useLayoutEffect() 。
即：Hooks 组件（使用了Hooks的函数组件）有生命周期，而函数组件（未使用Hooks的函数组件）是没有生命周期的。

1. constructor：函数组件不需要构造函数，可以通过调用 useState 来初始化 state。如果计算的代价比较昂贵，也可以传一个函数给 useState。

const [num, setNum] = useState(0);

2. getDerivedStateFromProps ：一般情况下，不需要使用它，可以在渲染过程中更新 state，以达到实现getDerivedStateFromProps 的目的。
3. shouldComponentUpdate：可以用 React.memo 包裹一个组件来对它的 props 进行浅比较

const Component = React.memo((props) => {
  // 具体的组件
});

注意：React.memo 等效于 PureComponent，它只浅比较 props。这里也可以使用 useMemo 优化每一个节点。

4. render：这是函数式组件主体本身。
5. componentDidMount，componentDidUpdate，componentWillUnmount：useEffect Hook 可以表达这些的所有组合（包括不太常见的情况）。

• componentDidMount

useEffect(()=>{
  // 需要在 componentDidMount 执行的内容
}, []);

• componentDidUpdate

useEffect(()=>{
  // 需要在 componentDidUpdate 执行的内容
}, [num]);

• componentWillUnmount：相当于 useEffect 里面返回的 cleanup 函数

useEffect(()=>{
  return function cleanup() {
    // 需要在 componentWillUnmount 执行的内容      
  }
}, []);

React的函数式组件有没有生命周期？

没有。因为函数式组件没有继承React.Component，由于生命周期函数是React.Component类的方法实现的。没继承这个类，自然就没法使用生命周期函数了。

注：如果要在项目中使用React Hooks，强烈推荐先安装eslint-plugin-react-hooks(由React官方发布)。在很多时候，这个eslint插件在我们使用React Hooks的过程中，会帮我们避免很多问题。