Hook是一个特殊函数，它可以勾入React的特性，如state

概览

Hook大致分为两大类，一类为state类，一类为effect类

  • state类

    可以使用React在类中使用的state等属性

  • effect类

    可以实现类似React类的特殊构造函数功能，如componmentWillMount

使用规则

Hook就是javascript的函数，使用时应遵循以下两个基本规则

  • 只能在函数最外层调用Hook。不要在循环、条件判断、子函数中调用
  • 只能在React的函数组件中调用，不要在其他原生javascript函数中调用

官方提供了eslint-plugin-react-hooks这个组件能保证以上两台

1

npm install eslint-plugin-react-hooks --save-dev

内置的Hook

useState

作用类似于class内中的this.state

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function Example() {
    // 返回的是一个state，以及修改它的函数，参数为返回的state的初始值
    // setCnt 相当于class的this.setState()，只是只能set cnt这个变量
    const [cnt, setCnt] = useState(0);
    // 如果需要多个变量，使用多次即可，也可以使用对象
    // const [todos, setTodo] = useState([{text: "Learn React"}]);

    return(
        <div>
            <p>{cnt}</p>
            {/* 不像类中的合并，更新时应该直接替换老对象 */}
            <button onClick={() => setCnt(cnt + 1)}>Click</button>
        </div>
    )
}

useEffect

数据获取、数据订阅、以及手动更改DOM都属于副作用

  • 作用类似componentDidMount,componentDidUpdate, componentWillUnmount。将class中的三个合并成为了一个

  • 当调用useEffect函数时，就是告诉React在完成对DOM有更改后，运行我们的作用函数

  • 作用函数可以通过返回一个函数来指定如何清除作用函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React, { useState, useEffect } from 'react';

function Example() {
    const [cnt, setCnt] = useState(0);

    // useEffect参数为作用函数
    useEffect(() => {
        // 修改网页的Title
        document.title = `You click ${cnt}`;
    });

    // 也可以多次使用useEffect,初始值也可以是对象
    ...
}

编写自定义的Hook

第三方

https://ahooks.js.org/zh-CN/