第二章 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 创建的回调函数不会总在组件重新渲染时重新创建

最后

以上就是诚心歌曲为你收集整理的React useReduce useCallback使用第二章 React 之useReduce useCallback的使用一、useReduce是什么？二、useReduce使用步骤三、useCallback使用步骤的全部内容，希望文章能够帮你解决React useReduce useCallback使用第二章 React 之useReduce useCallback的使用一、useReduce是什么？二、useReduce使用步骤三、useCallback使用步骤所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。