React之context上下文详解

React之context上下文详解

简介

首先介绍下React中context这个概念，React官方文档上是这么介绍的：

Context provides a way to pass data through the component tree without having to pass props down manually at every level.
props

翻译：上下文提供了一种通过组件树传递数据的方法，而不必在每个级别手动传递props。

我们知道，在React中想要实现父组件向子组件通信，需要通过props一层一层向下传递信息，但是如果组件的层级嵌套很深，这种方式就不是很适合了。React提供的context正是为了解决这个问题，context相当于一个全局变量，我们只需要将需要传递的信息放入这个变量中，那么不管组件树多复杂，嵌套有多深，子组件都可以从context中获取需要的信息。

用法

看下面这个例子：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Child extends Component {
    static contextTypes = {
        greetings: PropTypes.string
    }

    render() {
        return (
            <p>
                { this.context.greetings }
            </p>
        )
    }
}

class Father extends Component {
    constructor(props) {
        super(props);
        this.state = {
            greetings: 'Waiting...'
        }
    }

    static childContextTypes = {
        greetings: PropTypes.string
    }

    getChildContext() {
        return {
            greetings: this.state.greetings
        }
    }

    componentDidMount() {
        setTimeout(()=>{
            this.setState({
                greetings: 'I am back !'
            })
        }, 3000);
    }
    render() {
        return (
            <div>
                <Child />
            </div>
        )
    }
}

父组件:

• 构造函数中初始化state
• getChildContext方法来设置context，返回的对象就是context
• childContextTypes来验证getChildContext 返回的对象

子组件:

• 使用contextTypes来验证你需要获取的状态的类型
• 子组件中通过this.context来获取context中传递的值

总结

一个组件可以通过 getChildContext 方法返回一个对象，这个对象就是子树的 context，提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。

如果一个组件设置了 context，那么它的子组件都可以直接访问到里面的内容，它就像这个组件为根的子树的全局变量。任意深度的子组件都可以通过 contextTypes 来声明你想要的 context 里面的哪些状态，然后可以通过 this.context 访问到那些状态。

context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性。而且，就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。

但是这种机制对于前端应用状态管理来说是很有帮助的，因为毕竟很多状态都会在组件之间进行共享，context 会给我们带来很大的方便。一些第三方的前端应用状态管理的库（例如 Redux）就是充分地利用了这种机制给我们提供便利的状态管理服务。但我们一般不需要手动写 context，也不要用它，只需要用好这些第三方的应用状态管理库就行了。

参考React.js 小书

下面的是我的公众号二维码图片，欢迎关注。