App.js

    importReact, { 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 } } } // Home functionHome() { const [state, dispatch] = useReducer(reducer, { num:0 }) //第一个参数reducer处理数据的手段，第二个参数初始化状态的值， useReducer返回一个数组，数组里有数据和指令触发方法 return ( <div> <p>数据： {state.num}</p> <buttononClick={() => { dispatch({ type:“add” }) }}>+ 1</button> <buttononClick={() => { dispatch({ type:“sub” }) }}> - 1</button> </div> ) } // About functionAbout() { const [state, dispatch] = useReducer(reducer, { num:10 }) return ( <div> <p>数据： {state.num}</p> <buttononClick={() => { dispatch({ type:“add” }) }}>+ 1</button> <buttononClick={() => { dispatch({ type:“sub” }) }}> - 1</button> </div> ) } functionApp() { return ( <div> <Home/> <About/> </div> ) } exportdefaultApp