做苗木网站哪家做得好,宁波做网站,公司做网站比较好的,装饰网站建设重要性目录 useReducer案例1#xff1a;useReducer不带初始化函数案例2#xff1a;useReducer带初始化函数注意事项1#xff1a;dispatch函数不会改变正在运行的代码的状态注意事项2#xff1a;获取dispatch函数触发后 JavaScript 变量的值注意事项3#xff1a;触发了reduceruseReducer不带初始化函数案例2useReducer带初始化函数注意事项1dispatch函数不会改变正在运行的代码的状态注意事项2获取dispatch函数触发后 JavaScript 变量的值注意事项3触发了reducer但页面没有更新 React官方文档
useReducer
useReducer是一个 React Hook可让你向组件添加一个Reducer 。 用法
const [state, dispatch] useReducer(reducer, initialArg, init?)reducer指定状态如何更新的 Reducer 函数接受两个参数state(状态)和action(操作)两个参数并返回下一个状态initialArg初始值可以是任何类型的值可选 init应返回初始状态的初始化函数。如果未指定则将初始状态设置为initialArg。否则将初始状态设置为调用的结果init(initialArg)
useReducer返回一个包含两个值的数组
state(当前状态):在第一次渲染期间它被设置为init(initialArg)或initialArg如果没有initdispatch该dispatch函数可让您将状态更新为不同的值并触发重新渲染
案例1useReducer不带初始化函数
步骤 1、定义一个reducer函数根据不同的action返回不同的状态 2、组件中调用userReducer(reducer,initialArg) 3、调用dispatch({type:“INC”})通知reducer产生一个新的状态随后更新UI const idata {count:0};
function reducer(state, action) {console.log(state,state)console.log(action,action)switch (action.type) {case INC:return {count:state.count1}case DEC:return {count:state.count-1}case SET:return {count:action.payload}default:return {count:idata}}
}
function App() {const [state, dispatch] useReducer(reducer, idata);return (div classNameAppthis is App{state.count}button onClick{() dispatch({ type: INC })}/buttonbutton onClick{() dispatch({ type: DEC })}-/buttonbutton onClick{() dispatch({ type: SET, payload: 100 })}update/button/div);
}export default App;案例2useReducer带初始化函数
设置initData为初始化函数设置state初始状态
#App.js
import Son from ./Son.js;
function App() {return (div classNameAppSon idata{{count:1}}/Son/div);}export default App;
#Son.js
import { useReducer } from react;const initData(){return {count:0}
}function reducer(state, action) {console.log(state,state)console.log(action,action)switch (action.type) {case INC:return {count:state.count1}case DEC:return {count:state.count-1}case SET:return {count:action.payload}default:return initData() }
}const Son ({idata}) {console.log(idata,idata)const [state, dispatch] useReducer(reducer, idata,initData);return (div classNameAppthis is AppdivCount {state.count}/divbutton onClick{() dispatch({ type: INC })}/buttonbutton onClick{() dispatch({ type: default })}default/buttonbutton onClick{() dispatch({ type: DEC })}-/buttonbutton onClick{() dispatch({ type: SET, payload: 100 })}update/button/div);
}export default Son;
注意事项1dispatch函数不会改变正在运行的代码的状态
点击update按钮handler函数触发之后页面Count显示为100但是打印出来state.count为0
dispatch函数不会改变正在运行的代码的状态更新状态会请求使用新状态值进行另一次渲染但不会影响state已在运行的事件处理程序中的 JavaScript 变量。
#Son.js
import { useReducer } from react;
const initData () {return { count: 0 }
}
function reducer(state, action) {switch (action.type) {case INC:return { count: state.count 1 }case DEC:return { count: state.count - 1 }case SET:return { count: action.payload }default:return initData()}
}const Son ({ idata }) {
const [state, dispatch] useReducer(reducer, idata, initData);const handler (){dispatch({ type: SET, payload: 100 })console.log(state.count,state)setTimeout((){console.log(state.count,state)},1000)}return (div classNameAppthis is AppdivCount {state.count}/divbutton onClick{() dispatch({ type: INC })}/buttonbutton onClick{() dispatch({ type: default })}default/buttonbutton onClick{() dispatch({ type: DEC })}-/buttonbutton onClick{() handler()}update/button/div );
}export default Son;
注意事项2获取dispatch函数触发后 JavaScript 变量的值
执行reducer(state, action)之后就可以拿到最新的变量的值 const handler (){let action { type: SET, payload: 100 };dispatch(action)console.log(state,state) //打印0setTimeout((){console.log(state,state) //打印0},1000)const nextState reducer(state, action);console.log(nextState,nextState) //打印100}注意事项3触发了reducer但页面没有更新
直接更改状态中的对象或数组并不会重新渲染。因为下一个状态等于前一个状态则React 将忽略您的更新Object.is指向的还是同一个引用地址。所以需要始终更新状态中的对象和状态中的数组。如下
function reducer(state, action) {switch (action.type) {case incremented_age: {// ✅ Correct: creating a new objectreturn {...state,age: state.age 1};}case changed_name: {// ✅ Correct: creating a new objectreturn {...state,name: action.nextName};}// ...}
}
