这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战
什么是useReducer?
useReducer是一种让函数组件保存状态的方式,是useState的替代方案.通过useReducer可以向子组件传递dispatch.
useReducer接受什么?
接收的第一个参数是一个reducer函数,第二个参数是一个初始的状态值.
userReducer返回的是什么?
返回的是一个数组,数组的第一个元素是存储的状态,第二个元素是出发action的dispatch方法.
定义的reducer函数接收什么,返回什么?
接收两个参数,第一个是以前的状态值,第二个是action对象
function reducer(state,action) { switch (action.type) { case 'increment': return state + 1 default: return state; } } function App(props) { const [count, dispatch] = useReducer(reducer,0); return ( <div> <span>{count}</span> <button onClick={() => dispatch({type: 'increment'})}>+1</button> </div> ) } 复制代码
什么是useContext?
在跨组件层级获取数据时简化获取数据的代码。下面详细讲解下useContext的使用步骤。
- 通过createContext()创建一个xxxContext.
- 通过xxxContext.Provider包裹并将value传递给目标组件。
- 目标组件通过useContext(xxxContext)获取到value传递的值。
// 1. 创建一个xxxContext const countContext = createContext(); // 2. 通过xxxContext.Provider 包裹传递value给目标组件 function App() { return ( <countContext.Provider value={666}> <Foo /> </countContext.Provider> ) } // 3. 目标组件通过useContext(xxxContext)获取value传递的值 function Foo() { const count = useContext(countContext) return ( <div> {count} </div> ) } 复制代码
注意：useContext的参数必须是context对象本身，调用了useContext的组件会在context值变化时重新渲染。当前的context值由上层组件中距离当前组件最近的<xxxContext.Provider>的value prop决定。当Provider的value值发生变化时，它内部的所有消费组件都会被重新渲染，并且Provider及其内部consumer组件都不受制于shouldComponentUpdate函数，当consumer组件在其祖先组件退出更新的情况下也能更新。
