1.什么是useReducer Hook?
从名称来看, 很容易会误以为useReducer是用来替代Redux的, 但是其实不是;useReducer是useState的一种替代方案, 可以让我们很好的复用操作数据的逻辑代码
可以从下面一个实例对他进行理解
Demo：两个组件中有两个具有完全相同功能的方法increment&descrement
注意点: 不同组件中的useState保存的状态是相互独立的, 是相互不影响的
import React, {useState, useReducer} from 'react'; function reducer(state, action) { switch (action.type) { case 'ADD': return {...state, num: state.num + 1}; case 'SUB': return {...state, num: state.num - 1}; default: return state; } } function Home() { function increment() { setNumState(numState + 1); } function decrement() { setNumState(numState - 1); } const [state, dispatch] = useReducer(reducer, {num: 0}); return ( <div> <p>{state.num}</p> <button onClick={increment()}>增加</button> <button onClick={discrement()}>减少</button> </div> ) } function About() { const [numState, setNumState] = useState(5); function increment() { setNumState(numState + 1); } function decrement() { setNumState(numState - 1); } return ( <div> <p>{state.num}</p> <button onClick={increment()}>增加</button> <button onClick={descrement()}>减少</button> </div> ) } function App() { return ( <div> <Home/> <About/> </div> ) } export default App;
通过观察可以发现相同的方法increment和descrement要分别在2个组件中写，非常冗余
解决方案：useReducer
useReducer接收的参数:
- 第一个参数: 处理数据的函数
- 第二个参数: 保存的默认值
// 第一个参数：处理数据的函数 function reducer(state, action) { switch (action.type) { case 'ADD': return {...state, num: state.num + 1}; case 'SUB': return {...state, num: state.num - 1}; default: return state; } }
//第二个参数：保存的默认值 const [state, dispatch] = useReducer(reducer, {num: 0});
- useReducer返回值:会返回一个数组, 这个数组中有两个元素
- 第一个元素: 保存的数据
- 第二个元素:
dispatch函数
const [state, dispatch] = useReducer(reducer, {num: 0});
通过返回的state和dispatch派发任务和接受返回值
<p>{state.num}</p> <button onClick={()=>{dispatch({type:'ADD'})}}>增加</button>
实例优化代码（使用useReducer）
import React, {useState, useReducer} from 'react'; // 1. 定义reducer函数，和reducer的写法相似 function reducer(state, action) { switch (action.type) { case 'ADD': return {...state, num: state.num + 1}; case 'SUB': return {...state, num: state.num - 1}; default: return state; } } function Home() { // 接受返回的参数，第一个参数是修改后的数据值，第二个参数是dispatch函数 const [state, dispatch] = useReducer(reducer, {num: 0}); return ( <div> <p>{state.num}</p> <button onClick={()=>{dispatch({type:'ADD'})}}>增加</button> <button onClick={()=>{dispatch({type:'SUB'})}}>减少</button> </div> ) } function About() { const [state, dispatch] = useReducer(reducer, {num: 5}); return ( <div> <p>{state.num}</p> <button onClick={()=>{dispatch({type:'ADD'})}}>增加</button> <button onClick={()=>{dispatch({type:'SUB'})}}>减少</button> </div> ) } function App() { return ( <div> <Home/> <About/> </div> ) } export default App;
方便管理又去除了冗余代码~真好！hooks真的太贴心啦！
