位置: IT常识 - 正文
React 上下文(react 上下文hooks内容存储到本地)
编辑：rootadmin在React中上下文是一种通信方案。 上下文的特点 在组件树中，是一种自上而下的单向数据流通信方案，数据只能从父组件注入，在子组件中访问。 组件关系只要满足“父组件-后代组件”这种关系时，都可以使用上下文通信。 在父组件中provide提供数据，在后代组件中注入并使用，这种通信不具有响应式，有点像v ... 
本文链接地址:https://www.jiuchutong.com/zhishi/313188.html
转载请保留说明！
推荐整理分享React 上下文(react 上下文hooks内容存储到本地)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:react document,react上下文对象,react 上下文hooks内容存储到本地,react contextmenu,react上下文对象,react 上下文hooks内容存储到本地,react上下文,react 上下文hooks内容存储到本地,内容如对您有帮助，希望把文章链接给更多的朋友！
在React中上下文是一种通信方案。
上下文的特点在组件树中，是一种自上而下的单向数据流通信方案，数据只能从父组件注入，在子组件中访问。组件关系只要满足“父组件-后代组件”这种关系时，都可以使用上下文通信。在父组件中provide提供数据，在后代组件中注入并使用，这种通信不具有响应式，有点像vue中的provide/inject通信。如何使用上下文使用const{Provider,Consumer} = Raact.createContext()get="_blank">创建上下文。
使用<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} = ThemeContextclass 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上一篇：帝国伪静态Apache的Rewrite如何设置(帝国cms伪静态规则)
