- A+
所属分类：Web前端
在React中上下文是一种通信方案。
上下文的特点
- 在组件树中，是一种自上而下的单向数据流通信方案，数据只能从父组件注入，在子组件中访问。
- 组件关系只要满足“父组件-后代组件”这种关系时，都可以使用上下文通信。
- 在父组件中provide提供数据，在后代组件中注入并使用，这种通信不具有响应式，有点像vue中的provide/inject通信。
如何使用上下文
-
使用 const{Provider,Consumer} = Raact.createContext() 创建上下文。
-
使用 <Provider value={}></Provider> 向组件树中提供数据。
-
在后代组件中使用<Consumer>{(context)=>(jsx/)}</Consumer>访问上下文数据。
- 如果后代组件是类组件，可以使用 Page.contextType = ThemeContext 访问上下文数据。
使用上下文穿透和上下文通信的区别
- props穿透必须清楚组件之间的关系，上下文只要满足“父组件-后代组件”关系。
- props适合父子关系明显的组件通信，上下文关系适合父子关系不明确的组件通信。
- props穿透会导致后代组件的props变得臃肿，上下文通信更加直接方便。
上下文通信在那些场景遇到
- 路由中会用到上下文通信
- 状态管理中
- 组件库中，切换主题色，切换组件大小等
- 国际化中
使用上下文封装拾色器
import { PureComponent, useState } from "react" //创建上下文对象 const ThemeContext = React.createContext() const{Consumer,Provider} = ThemeContext class App extends PureComponent{ render(){ return( <Consumer> { (context) => { console.log(context) return( <div style={context}> <h1>555</h1> </div> ) } } </Consumer> ) } } //封装拾色器 function ThemeToggle({value, onChange}){ const change = (ev) =>{ const key = ev.target.name // console.log('key',key); const val = ev.target.value // console.log('val',val); //把变化后的主题色回传给父组件 onChange({...value, [key]:val}) } return( <> <div> <label >前景色</label> <input type="color" name="color" value={value.color} onChange={change} /> <label >背景色</label> <input type="color" name="background" value={value.background} onChange={change} /> </div> </> ) } function A(){ const[color ,setColor] = useState({color:'#000000',background:'#000000'}) return( <Provider value={color}> <h1>拾色器</h1> <App /> <ThemeToggle value={color} onChange={ev=>setColor(ev)} /> </Provider> ) } export default A
