React Hook基本使用

简单说一下为什么我会了解到Hook API吧。之前写React只会用class组件的方法，但是新项目使用到了HOOK，然后被迫学习这个API。

为什么要使用Hook？

根据官方文档介绍：Hook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。

Effect Hook

了解这个API之前先弄懂两个名词“副作用”与“作用”。其实他们是等同的是 你之前在使用React组件中执行过数据获取、订阅或者手动修改过的操作。

useEffect就是一个Effect Hook，给函数组件增加了操作副作用的能力。它与class组件中的componentDidMount、componentDidUpdat和componentWillUnmount作用相同。只是被合成了一个API。

使用：

import React, {useState, useEffect } from 'react';
function Demo() {
   const [count, setCount] = useState() ;
   // 相当于componentDidMount 和 componentDidUpdate:
   useEffect(() => {
       // 使用浏览器API更新页面标题
       document.title = 'You clicked ${count} times';
    }) ;
    return (
      <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
           Click me  
      </div>
    )
}         

　　当你调用useEffect时。就是告诉React在完成对Dom的更改后运行你的'副作用'函数。

但是上面这个Demo存在一个问题。就是页面会一直调用userEffect里的内容，导致性能问题。

解决方法：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

当我们使用[count]为第二个参数时，它便会去监听state里的count如果一致则不执行effect，如果不一致,React会再次调用effect.且数组中如果有多个元素，只要其中一个改变也会在次调用effect。

如果你传入一个空数组（[]）,那么你将只会运行一次effect（仅在组件挂载和卸载时执行）这就告诉React你的effect不依赖于props或state中的任何值。effect内部的props和state就会一直拥有其初始值。

清除effect

在React class中，我们通常会用componentDidMount中设置订阅，并在componentWillUnmount中清除。下面是effect清除

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});

清除可以防止引起内在泄漏，而清除的处理是在React组件卸载时执行。

Hook使用规则注意

1.只能在函数最外层调用Hook。不能在循环、条件或者子函数中调用 。

2.只能在React的函数组件中调用Hook。

搜集知识点来源：

1）https://zh-hans.reactjs.org/docs/hooks-intro.html（React官网）