React16新的context Api

context Api，主要用于跨组件间的数据传递，如果不用context Api，那一级组件如果要给三级组件传递数据，就会很麻烦，需要先用props传递给二级组件，二级组件再用props传给三级组件，如果再有回传也是一样的道理，一层一层的传递，这会很麻烦，如果应用context Api就会很方便。其实在React16之前的版本中，已经有context Api，但在16.3版本之后，React官方对其进行更改，使其更加方便，效率、性能都得到了提升。

用法：（部分导入导出省略）

一级组件向三级组件传递数据：

一级组件：

import React, { createContext, Component } from 'react'

export const { Provider, Consumer } =  createContext()

class App extends Component {
    render(){
        return (
            <Provider value={{ title: 'hello', color: 'red' }}>
                <Header/>
            </Provider>
        )
    }
}

二级组件：

class Header extends Component {
    render(){
        return (
            <Title/>
        )
    }
}

三级组件：

import { Consumer } from './App.js'

class Title extends Component {
    render(){
        return (
            <Consumer>
                {
                    context => (
                        <h1 style={{ color: context.color }}>
                            { context.title }
                        </h1>
                    )
                }
            </Consumer>
        )
    }
}

可以看出，应用了context Api传递数据会很方便，在value中定义好就可以，不用一级一级的传递。用过react-redux会感觉很相似，其实react-redux内部的实现也是借助了context Api，只不过目前安装的版本还没有正式应用新的context Api，但已经开发出了新的版本，可以在其github仓库里找到。

三级组件向一级组件传递数据：

一级组件：

import React, { createContext, Component } from 'react'

export const { Provider, Consumer } =  createContext()

class App extends Component {

    this.handleClick = (val) => {
        console.log(val)
    }

    render(){
        return (
            <Provider value={{ title: 'hello', color: 'red', handleClick: this.handleClick }}>
                <Header/>
            </Provider>
        )
    }
}

二级组件：

class Header extends Component {
    render(){
        return (
            <Title/>
        )
    }
}

三级组件：

import { Consumer } from './App.js'

class Title extends Component {

    btnClick = (fn) => {
        fn('world')
    }

    render(){
        return (
            <Consumer>
                {
                    context => (
                        <div>
                            <h1 style={{ color: context.color }}>
                                { context.title }
                            </h1>
                            <button onClick={ () => this.btnClick(context.handleClick) }>clickA<button>
                            <button onClick={ this.btnClick.bind(this, context.handleClick) }>clickB<button>
                            <button onClick={ () => context.handleClick('hello world') }>clickC<button>
                            <button onClick={ context.handleClick.bind(this, 'hello world') }>clickD<button>
                        </div>
                    )
                }
            </Consumer>
        )
    }
}

三级组件向一级组件传递数据，也是采用回调函数的方式传递，但应用了context Api，就不需要一级一级向上传递，直接在一级组件中定义好方法，在三级组件中应用就可以，相比较而言，简单很多。

更新context Api的原因

老版本的context Api虽然在写法上不用一级一级传递，但其底层是实现还是一级一级传递数据，所以，如果某个中间组件在shouldComponentUpdate进行了优化或者限制，可能会导致下一级组件依赖的数据不会更新，同时也降低了复杂程度，提高性能。

赏

谢谢你请我吃糖果