位置: IT常识 - 正文
React--》useReducer的讲解与使用(react reducer详解)
编辑：rootadmin目录
useReducer的使用
刨析useReducer参数
useReducer的使用
useReducer的使用
推荐整理分享React--》useReducer的讲解与使用(react reducer详解)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:react-resume-site,react reduce,react sentry,react se,react-rewired,react reducers,react se,react reducer,内容如对您有帮助，希望把文章链接给更多的朋友！
在React函数式组件中，我们可以通过useState()来创建state，这种state创建方式会给我们返回两个东西state和setState()。state用来读取数据，而setState()用来设置修改数据，但这种方法也存在着一些不足，因为所有的修改state方式都必须通过setState()来进行，如果遇到一些复杂度比较高的state时，这种方式就变得有些繁琐了。
为了解决复杂state带来的不便，React为我们提供了一个新的使用state方式，当你的state过于复杂时，你就可以使用对state整合的工具 “Reducer” ，其作用就是将那些和同一个state相关的所有函数都整合到一起，方便在组件中进行调用。
注意：Reducer只适合那些比较复杂的state，对于简单的state使用Reducer只能是徒增烦恼，以下都会用简单的例子来说明Reducer的使用。
刨析useReducer参数useReducer实际上算是useState的升级版，虽然使用比useState复杂，但其能够应付更加繁琐的应用场景，其接收的参数有三个，接下来将详细刨析useReducer这个Hooks的使用，Reducer和State相同也是一个钩子函数，其语法格式如下：
const [state, dispatch] = useReducer(reducer, initialArg, init?)数组中第一个参数：用来获取state的值；数组中第二个参数：state修改的派发器，通过派发器可以发送操作state的命令，具体的修改行为将会由另外一个函数执行。
reducer参数：用于指定如何更新状态。它必须函数，应该将状态数据和操作方法作为参数，并且应该返回下一个状态。状态和动作可以是任何类型。即：(state,action) => newState
state：是当前最新的状态值
action：用于告诉reducer当前执行的操作，reducer会根据不同的操作执行不同的逻辑
newState：返回值，返回一个新的state
initialArg参数：用于计算初始状态的值，即为state的初始值，作用和useState()中的值是一样的，它可以是任何类型的值。如何从中计算初始状态取决于下一个init参数。
init参数：可选参数，本质上是一个函数，参数是初始的state，如果传入这个参数的话，那么初始state就是init(initState)的返回结果。通俗来讲就是：应该返回初始状态的初始值设定项函数。如果未指定，则初始状态设置为initialArg。否则，初始状态被设置为调用init（initialArg）的结果。
useReducer的使用在 官方文档案例 中，已经很明确的告诉我们如何使用useReducer，如下：
官方文通过将reducer函数抽离出来去管理状态的变化，根据传入action的不同返回新的状态，我们在点击按钮时会调用dispatch函数，并传入一个包含type属性的对象即action，这个对象表示将要进行的状态更新操作。
接下来举一个简单的计数器的案例，来比较一下使用Reducer和未使用的区别在哪里。
传统操作State的方法为：
import React,{ useState } from 'react'const App = () => { const [num,setNum] = useState(0) const addHandler = () =>{ setNum(prenum => prenum + 1) } const subHandler = () =>{ setNum(prenum => prenum -1) } return ( <div style={{fontSize:'30px',padding:'50px'}}> <button onClick={addHandler}>加1</button> {num} <button onClick={subHandler}>减1</button> </div> )}export default App使用Reducer操作state方法为：
import React,{ useReducer } from 'react'const App = () => { // reducer函数 state:当前最新状态值、action:当前执行的操作 const reducer = (state,action) =>{ switch(action.type){ case 'ADD': return state + 1 case 'SUB': return state - 1 default: return state } } const [num,numDispatch] = useReducer(reducer,0) const addHandler = () =>{ numDispatch({type:'ADD'}) } const subHandler = () =>{ numDispatch({type:'SUB'}) } return ( <div style={{fontSize:'30px',padding:'50px'}}> <button onClick={addHandler}>加1</button> {num} <button onClick={subHandler}>减1</button> </div> )}export default App当然如果是非常简单的state，使用useState是明智的选择，但在某些场景下，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。useReducer会更加适用，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。如下：
import { useReducer } from 'react';function reducer(state, action) { switch (action.type) { case 'incremented_age': { return { name: state.name, age: state.age + 1 }; } case 'changed_name': { return { name: action.nextName, age: state.age }; } default: return null }}const initialState = { name: 'Taylor', age: 42 };export default function App() { const [state, dispatch] = useReducer(reducer, initialState); function handleButtonClick() { dispatch({ type: 'incremented_age' }); } function handleInputChange(e) { dispatch({ type: 'changed_name', nextName: e.target.value }); } return ( <> <input value={state.name} onChange={handleInputChange} /> <button onClick={handleButtonClick}> +1 </button> <p>Hello, {state.name}. You are {state.age} years old</p> </> );}无论是useState还是useReducer，都是为了帮助我们的管理组件的状态 ，但如果你的项目比较复杂，后期要经常加以维护的话，选择useReducer或许是一个不错的选择。
上一篇：Css之使用calc()计算宽高（vw/vh）(css calculate)
下一篇：Segment Anything Model (SAM)——分割一切，具有预测提示输入的图像分割实践(segment anything model github)
