React useReduce useCallback使用

第二章 React 之useReduce useCallback的使用

---

---

一、useReduce是什么？

为了解决复杂State带来的不便，React为我们提供了一个新的使用State的方式。Reducer横空出世，reduce单词中文意味减少，而reducer我觉得可以翻译为“当你的state的过于复杂时，你就可以使用的可以对state进行整合的工具”。当然这是个玩笑话，个人认为Reducer可以翻译为“整合器”，它的作用就是将那些和同一个state相关的所有函数都整合到一起，方便在组件中进行调用。

当然工具都有其使用场景，Reducer也不例外，它只适用于那些比较复杂的state，对于简单的state使用Reducer只能是徒增烦恼。

二、useReduce使用步骤

代码如下（示例）：

const [state, dispatch] = useReducer(reducer, initialArg, init);

为了避免reducer会重复创建，通常reducer会定义到组件的外部。
返回值： 数组：

• 第一个参数，state 用来获取state的值
• 第二个参数，state 修改的派发器通过派发器可以发送操作state的命令
  具体的修改行为将会由另外一个函数(reducer)执行。

三、useCallback使用步骤

useCallback()
参数：

1. 回调函数
2. 依赖数组
   当依赖数组中的变量发生变化时，回调函数才会重新创建，如果不指定依赖数组，回调函数每次都会重新创建
   一定要将回调函数中使用到的所有变量都设置到依赖数组中除了（setState）

代码如下（示例）：

import React, {useCallback, useState} from 'react';
import A from "./components/A";

const App = () => {
    console.log('App渲染');
    const [count, setCount] = useState(1);
    const [num, setNum] = useState(1);

    const clickHandler = useCallback(() => {
        setCount(prevState => prevState + num);
        setNum(prevState => num + 1);
    }, [num]);

    return (
        <div>
            <h2>App -- {count}</h2>
            <button onClick={clickHandler}>增加</button>
            <A onAdd={clickHandler}/>
        </div>
    );
};
export default App;

useCallback 是一个钩子函数，用来创建React中的回调函数
useCallback 创建的回调函数不会总在组件重新渲染时重新创建