React 上下文

  • React 上下文已关闭评论
  • 172 次浏览
  • A+
所属分类:Web前端
摘要

在React中上下文是一种通信方案。使用 const{Provider,Consumer} = Raact.createContext()  创建上下文。

在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