React 的 Context

当我们需要像很多组件共享一些Props的时候,就可以使用Context,但是不要使用太多,使用太多会导致组件的复用性下降。

如何创建一个Context

const { Provider, Consumer } = React.createContext(defaultValue)

解构出来的Provider和Consumer是两个组件,而且这个默认值是当Consumer在上层早不到Provider的时候才会使用,并不是Provider的默认值

Provider

相当于一个容器,提供基本的值,可以在这里和react的state关联起来,一旦Provider的value发生变化就会导致Consumer刷新,而且需要注意的是Provider的刷新不受shouldComponentUpdate 这个生命周期的影响

Consumer

使用该组件的时候需要在里面嵌套一个方法,参数为当前的context值,值为和最近的Provider提供的相同,如果上层没有Provider,那么值和defaultValue相同,如下

<Consumer> 
   {
        (value) => {
            //根据拿到的value进行相应的处理
        }
    }
</Consumer>

使用Context

  • 方式一: Provider里面套一个Consumer组件, 然后在Consumer里面的方法中返回我们自己的组件
  • 方式二: 外部不使用Provider,直接使用Consumer, 此时Consumer孩子方法访问到的context值就我们我们创建时候的默认值

性能优化

  render() {
    return (
      <Provider value={{something: 'something'}}>
        <Toolbar />
      </Provider>
    );
  }

上面这种写法由于Provider里面的value是直接传的而不是引用state里面的,所以会导致render函数执行的时候Provider的value属性重新创建一次,就会导致Provider里面的Consumer也重新刷新一次,由于Provider的刷新可以不受shouldComponentUpdate影响的,所以这就是不必要的刷新,正确的写法应该是下面这样

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ReactContext是一种在组件之间共享数据的方法。它通过创建一个context对象,其中包含一个Provider和Consumer组件来实现。 Provider组件用于提供共享的数据,而Consumer组件用于获取这些共享的数据。在Provider组件内部,可以通过value属性来传递数据。而在Consumer组件内部,通过函数的方式获取这些数据。 下面是一个使用Context的例子: connect函数接受一个mapState函数作为参数,该函数用于将context的值映射到组件的props中。 总结来说,ReactContext提供了一种在组件之间共享数据的方式,可以通过Provider组件提供数据,再通过Consumer组件获取数据。同时,通过封装Consumer组件的方式,可以简化使用过程。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [React中的context](https://blog.csdn.net/sxm666666/article/details/115704805)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [Reactcontext上下文详解](https://blog.csdn.net/astonishqft/article/details/82868126)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值