React Context上下文
目录
前言
首先你需要通过在终端 context分为新版后旧版,这里都介绍下 一 context旧版使用步骤1.1 根组件childContextTypes属性定义静态属性 // 声明Context对象属性 static childContextTypes = { propA: PropTypes.string,visibleA:PropTypes.string,methodA: PropTypes.func } 1.2 根组件getChildContext方法返回context对象, 指定子组件可以使用的信息 // 返回Context对象,方法名是约定好的 getChildContext () { return { propA: this.state.propA,methodA: this.changeStateByChildren } } 注意:如果context的值是动态的采用state管理,更改某个context值时,改变根组件的state 1.3 子组件contextTypes静态属性调用context先定义静态属性,根据约定好的参数类型,否则会出现未定义 static contextTypes = { propA: PropTypes.string,methodA:PropTypes.func } 1.4 下文改变context的值,通过context的函数去改变根组件的状态即可新版context的使用步骤和方法:更好的解释了生产者和消费者模式 1.5 例子父组件Greeterclass Greeter extends Component { constructor(props) { super(props); this.state = { add: 87,remove: 88,}; } static childContextTypes = { add: PropTypes.number,remove: PropTypes.number,} getChildContext() { const { add,remove } = this.state; return { add,remove,}; } render() { return ( <div> <ComponetReflux /> </div> ); } } 子组件ComponetRefluxclass ComponetReflux extends Component { constructor(props) { super(props); this.state = { }; } static contextTypes = { add: PropTypes.number,} render() { console.log(this.context); // 打印{add:87,remove:88} const { name,age } = this.state; return ( <div>测试context</div> ); } } 二 新版context的使用步骤和方法更好的解释了生产者和消费者模式 2.1 先定义全局context对象import React from ‘react‘ const GlobalContext = React.createContext() export default GlobalContext 2.2 根组件引入GlobalContext,并使用GlobalContext.Provider(生产者)<GlobalContext.Provider value={{ background: ‘green‘,color: ‘white‘,content:this.state.content,methodA:this.changeStateByChildren }} /> 注意:传入的value为根context对象的值,如果是动态的,使用状态管理 2.3 子组件引入GlobalContext并调用context,使用GlobalContext.Consumer(消费者)<GlobalContext.Consumer> { context => { return ( <div> <h1 style={{background: context.background,color: context.color}}> {context.content} </h1> <Input methodA = {context.methodA} value={context.content}></Input> </div> ) } } </GlobalContext.Consumer> 注意:GlobalContext.Consumer内必须是 三 context优缺点:优点:跨组件访问数据 缺点:react组件树种某个上级组件shouldComponetUpdate?返回false,当context更新时,不会引起下级组件更新 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- vue.js学习笔记之绑定style样式和class列表
- NoSql 分析 hbase,mongodb,redis
- c – 具有通用引用的成员函数模板不接受左值
- ruby-on-rails – Active_Admin删除不起作用 – 未捕获Type
- org.xml.sax.SAXParseException: Attribute "colum&
- 如何在c#中使用openFileDialog打开文件.txt?
- swift – 如何在运行时将StaticString转换为String?
- Oracle 中循环遍历某张表,并对符合条件的进行Update操作
- cocos ClippingNode相关
- c – 使用已检查的STL实现,任何可用的免费?