react的context用法_api接口源码

react的context用法_api接口源码React中Context的API

大家好,又见面了,我是你们的朋友全栈君。

1. Context

关于context官网文档有如下的描述:

  1. If you want your application to be stable, don’t use context. It is an experimental API and it is likely to break in future releases of React.
  2. If you aren’t familiar with state management libraries like Redux or MobX, don’t use context.
  3. If you aren’t an experienced React developer, don’t use context. There is usually a better way to implement functionality just using props and state.

综上所述就是不要使用context这个API。 虽然说不要用,但是我们也是要了解下这个API到底是干嘛的,毕竟有些优秀的库都是通过这个API实现而来,如:React-Redux。

简单了解context的作用就是在某个父组件中定义一个全局状态,这个状态可以在该父组件下的所有子组件中跨级传递共享。目前有两个版本分别是16.x之前和16.x之后的版本。

2. 老版本的Context

在老版本中有如下几个方法:

getChildContext: 在父组件中声明一个函数,返回的结果是一个对象,这个对象就是context,可以对子组件进行共享的状态。

childContextTypes: 在父组件中声明,执行context中的数据类型,如果不指定会产生错误。

contextTypes: 在子孙组件中进行声明,指定要接受context中哪些数据类型。

Tip: React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead to define contextTypes.

如上,react15.5已经弃用React.PropTypes,需要安装prop-types库。

看个小例子:

//父组件
import React from 'react'
import DemoSun from './componets/DemoSun'
import propTyps from 'prop-types'

class Demo extends React.Component {

  getChildContext() {
    return {
      color: 'red'
    }
  }
  render() {
    return (
      <div>
        DEMO
        我是什么颜色的太阳:<DemoSun />
      </div>
    )
  }
}

Demo.childContextTypes = {
  color: propTyps.string
}

export default Demo 


//子组件
import React from 'react'
import propTyps from 'prop-types'

class DemoSun extends React.Component {

  render() {
    return (
      <div>
        DemoSun
        {this.context.color}
      </div>
    )
  }
}

DemoSun.contextTypes = {
  color: propTyps.string
}

export default DemoSun
复制代码

结果如下,子组件可以获取context中的color的值。

如果
contextTypes定义在某个组件中,则这个组件的生命周期函数中会增加一个参数:

constructor(props, context)
componentWillReceiveProps(nextProps, nextContext)
shouldComponentUpdate(nextProps, nextState, nextContext)
componentWillUpdate(nextProps, nextState, nextContext)
componentDidUpdate(prevProps, prevState, prevContext)
复制代码

如果在无状态组件中使用context则如下:

const PropTypes = require('prop-types');

const Button = ({children}, context) =>
  <button style={
   
   {background: context.color}}>
    {children}
  </button>;

Button.contextTypes = {color: PropTypes.string};
复制代码

关于老版的context就介绍到此,来关注下新版本的context。

3. 新版本的Context

新版本中使用ProviderConsumer模式,在顶层Provider中传入value,在子孙中的Consumer中获取该值,并且能够传递函数,用来修改context。

  • React.createContext(args):
const Mycontext = React.createContext(defaultValue)
复制代码

新版的是通过该方法初始化一个context对象。当React渲染了一个订阅了这个Context对象的组件,这个组件会从组件树中离自身最近的那个匹配Provider中读取到当前的context值。只有当组件所处的树中没有匹配到Provider时,其defaultValue参数才会生效。

  • Context.Provider
<Mycontext.Provider value={/*某个值*/}></Mycontext.Provider>
复制代码

每个Context对象都会返回一个Provider组件。它允许消费组件订阅context变化。其有一个value属性,传递给消费组件。一个Provider可以和多个消费组件有对应关系,多个Provider也可以嵌套使用,里层的会覆盖外层数据。

当Provider的value值发生变化时,它内部的所有消费者组件都会重新渲染。Provider及其内部consumer组件都不受shouldComponentUpdate函数的影响,无论shouldComponentUpdate返回true或者false,因此当consumer组件在其祖先组件退出更新的情况下也可以更新。

  • Class.contexType

挂载在class上的contextType静态属性会被赋值为一个由React.createContext()的Context对象。这能让你使用this.context来消费最近Context上的那个值。你可以在任何生命周期中访问它,包括在render中。

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* 在组件挂载完成后,使用 MyContext 组件的值来执行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
MyClass.contextType = MyContext;
复制代码
  • Context.Consumer
<MyContext.Consumer>
    {value=>/*基于context值进行渲染*/}
</MyContext.Consumer>
复制代码

这里,React组件也可以订阅到context变更。这能让你在函数式组件中完成订阅context。Consumer的children必须是一个函数。

这需要函数作为子元素这种做法。这个函数接受当前的context值,返回一个react节点。传递给函数的value值等同于往上组件树离这个context最近的Provider提供的value值。如果没有对应的Provider,value参数等于传递给createContext()的defaultValue。

4. 注意事项

context会使用参考标识来决定何时进行渲染。这样就会当provider的父组件进行重新渲染时,可能会在consumer组件中触发意外的渲染。如下:

class App extends React.Componenet{
    render() {
        return (
            <Provider value={
   
   {text: 'text'}}>
                <Demo />
            </Provider>
        )
    }
}
复制代码

如上,每次value都会创建一个新的对象。为了避免这种情况,我们可以将其提出到state中进行管理。

class App extends React.Componenet{
    constructor(props) {
        super(props)
        this.state = {
            text: 'text'
        }
    }
    render() {
        return (
            <Provider value={
   
   {text: this.state.text}}>
                <Demo />
            </Provider>
        )
    }
}
复制代码

转载于:https://juejin.im/post/5c9b102d51882547e46dd417

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106909.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mybatis详解(全)「建议收藏」

    mybatis详解(全)「建议收藏」mybatis详解

  • oracle 第一范式,数据库范式之第一范式

    oracle 第一范式,数据库范式之第一范式数据库范式(DatabaseNormalization)设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小。目前关系数据库有六种范式:第一范式(1NF)、第二范式(2NF)、第三范式(3NF)、巴斯-科德范式(BCNF)、第四范式(4NF)和第五范式(5NF,还又称完美范式)。首先要明白”范式(NF)”…

  • CGLIB中BeanCopier源码实现

    CGLIB中BeanCopier源码实现转载:CGLIB中BeanCopier源码实现CGLIB代码包结构1.core2.beans3.reflect4.proxyBeanCopier实现机制1.BeanCopier的使用2.性能分析3.一次调用流程(1)CGLIB做了什么(2)从BeanCopier#create开始(3)KEY_FACTORY的由来(4)AbstractClassGene…

  • slf4j配置_@slf4j注解

    slf4j配置_@slf4j注解首先maven构建项目,在pom.xml中添加下面代码。&lt;dependency&gt; &lt;groupId&gt;org.slf4j&lt;/groupId&gt; &lt;artifactId&gt;slf4j-api&lt;/artifactId&gt; &lt;version&gt;1.7.21&lt;/version&gt;

    2022年10月22日
  • ES6模板字符串`的引用

    ES6模板字符串`的引用传统的JavaScript语言,输出模板通常是这样写的(下面使用了jQuery的方法)。$(‘#result’).append(‘Thereare<b>’+basket.count+'</b>’+’itemsinyourbasket,’+'<em>’+basket.onSale+'</em>areonsale!’);上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。

  • 计算机网络课设校园网络设计_中小型企业网络的设计与实现

    计算机网络课设校园网络设计_中小型企业网络的设计与实现《计算机网络实践》报告题目网络设计的规划与实现学年学期20Xx-20Xx学年第一学期课程名称计算机网络实践 院系XXX学院 专业计算机科学与技术 学号…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号