Hook是什么？

• Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
• Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。

什么时候用Hook?

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hook。

useState Hook

在函数组件中，我们没有 this，所以我们不能分配或读取 this.state。我们直接在组件中调用 useState Hook：

 1:  import React, { useState } from 'react';2:3:  function Example() {4:    const [count, setCount] = useState(0);5:6:    return (7:      <div>8:        <p>You clicked {count} times</p>9:        <button onClick={() => setCount(count + 1)}>  // setCount(value => newValue)
10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

• 需要参数： useState() 方法里面唯一的参数就是初始 state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。在示例中，只需使用数字来记录用户点击次数，所以我们传了 0 作为变量的初始 state。（如果我们想要在 state 中存储两个不同的变量，只需调用 useState() 两次即可。）
• 返回值： 示例中用到了数组解构接收值，调用useState（初始化值）会返回两个值，第一个变量接收初始化值，如count;第二个返回的值本身就是一个函数。它让我们可以更新 count 的值，所以我们叫它 setCount。

 

useEffect Hook

1、Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）

2、React中的副作用操作：

        发ajax请求数据获取

        设置订阅 / 启动定时器

3、语法和说明：

        useEffect(() => {

        // 在这可以执行任何带副作用操作

        return ()=> {

        // 在此做一些收尾工作，比如清楚定时器 / 取消订阅      

        }

        },[ stateValue ] )  // 如果指定的是[] ，回调函数只会在第一次render() 后执行。如果省略则意味着监听所有useState.

4、可以 useEffect Hook 看做如下三个函数的组合

        componentDidMount()

        componentDidUpdate()

        componentWillUnmount()

useRef Hook

1. Ref Hook 可以在函数组件中存储/查找组件内的标签或任意其他数据
2. 语法： const refContainer = useRef()
3. 作用： 保存标签对象，功能与React.createRef() 一样