React里面的Context应用示例

最新推荐文章于 2024-08-07 18:05:35 发布

转载最新推荐文章于 2024-08-07 18:05:35 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Xmforever/p/10323150.html

文章标签：

#javascript #ViewUI

本文深入探讨了React的Context API，包括其创建、使用和优化的方法。通过实例展示了如何利用Context进行状态管理和组件间的数据传递，同时介绍了装饰器的使用技巧，以简化代码结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 1. 创建上下文  createContext()

import React, { Component } from 'react';

const Context = React.createContext();

const store = {
    name: '小毛',
    sayHi(){
        console.log(this.name)      
    }      
}

export default ContextSample extends Component{
    render(){
        return(
            <div>
                <Context.Provider value={store}>
                    <div>
                        <Context.Consumer>
                            { /* 必须要一个函数 */}
                            { 
                                value => <div onClick={() => value.sayHi()}>{value.name}</div> 
                             }
                          </Context.Consumer>
                     </div> 
                   </Context.Provider>
               </div>
           )
        }   
}

<Context.Provider> 和 <Context.Consumer> 那样定义着写在那里，看着有点别扭。可以定义装饰器来渲染

const withProvider = Comp => props => (
    <Context.Provider value={store}>
      <Comp {...props} />
    </Context.Provider>
)

const withConsumer = Comp => props => (
  <Context.Consumer>
    { value => <Comp {...props} value={value} /> }
  </Context.Consumer>
)

　然后调用装饰器，修改代码

@withConsumer
class Inner extends Component{
  render(){
    return <div onClick={() => this.props.value.sayHi()}> { this.props.value.name } </div>
  }
}

@withProvider
class ContextSample extends Component {
  render() {
    return (
      <div>
        <Inner />
      </div>
    )
  }
}

export default ContextSample;

React的context是vuejs的provide&inject的来源，由高层组件向底层组件传值

转载于:https://www.cnblogs.com/Xmforever/p/10323150.html