小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
Context
场景一:一个父组件与多个子组件,若只是父组件传值给子组件,只需传递props值即可
场景二:一个父组件与多个子组件与孙子组件,进行数据传递时,为了避免数据一层一层往下传递,可以选择Context或者redux。
redux:数据存储一般是放在整个项目的最外层,那就可以检测整个项目的数据
Context:小范围的内的组件数据存储。context变化时,数据的使用者接收的参数也会随之变化,方便,很nice
步骤一:创建Context对象
export const rememberContext=createContext()
其中 Context.Provider
是数据的提供者 Context.Consumer
是数据的使用者
步骤二:使用
定义数据的提供者
<rememberContext.Provider value={{state,dispatch}}>
//组件
</rememberContext.Provider>
数据的使用者 (在hooks一般用不到)
<MyContext.Consumer>
{value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>
但是Context使用的场景有点局限,只支持单向数据流向,若子组件想更改父组件的值,需要结合下useReducer
useReducer
useReducer是useState的延伸,适合处理数据复杂的数据。
步骤一:定义存储的数据
const searchInfoInit={
params1:"",
params2:""
}
function reducer(){
switch(actions.type){
case "payload":
return {...state,...actions.data};
default :
return {...state}
}
}
const [state,dispatch]=useReducer(reducer,searchInfoInit)
如上:就将所有的数据集中处理。
步骤二:创建数据提供者,以及提供的数据
<rememberContext.Provider value={{state,dispatch}}>
...
</rememberContext.Provider>
步骤三:数据下发
import {rememberContext} from '../context'
export default function Child1(){
const {state,dispatch}=useContext(rememberContext)
return(
<div>
参数1:{state.params1}
</div>
)
}
步骤四:子组件更新,数据集中处理
import {rememberContext} from '../context'
export default function Child1(){
const {state,dispatch}=useContext(rememberContext)
function add(){
dispatch({
type:'payload',
data:{
params1:'新增'
}
})
}
return(
<div onClick={add}>
参数1:{state.params1}
</div>
)
}
如此实现了小范围数据存储,很nice ~