Hook

React16.8以后才支持；

动机

解决组件之间复用状态逻辑管理很难；

复杂组件变得难以理解；

Class难以理解， React Hook拥抱函数式编程思想；

简单案例

使用create-react-app创建项目：

1
2
3
4
5
6
7
8
9
10
11
import React, { useState } from "react";

export default function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>{count}</p>
            <button onClick={()=>{setCount(count+1)}}>点击</button>
        </div>
    )
};

Hook 使用的注意事项

  1. 只能在函数中使用Hook，不能再class中使用
  2. 只能在函数最外层调用Hook，不要在循环、条件判断或者子函数中调用
  3. 只能在react的函数组件中调用Hook，不要在其他Javascript函数中调用

UseState的使用

1
const [state, setState] = useState(initialState);

返回一个 state，以及更新 state 的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

两种更新方式

  1. 直接调用setState传入更新的数据

  2. 对于复杂的更新逻辑使用函数式更新

    1
    setState(()=>state+1)

如果定义的初始数据是引用类型，使用函数更新结合扩展运算符

1
2
3
4
5
6
7
const [state, setState] = useState({});
setState(()=>{
    return {
        ...stste,
        // 其他属性
    }
})

useState惰性初始化

如果更新的数据与上次一样，React将会跳过子组件的渲染及effect的执行。