React 状态管理 - Context API 前世今生（下）

New Context API

Provider【context的生产者组件】

• createContext 创建一个Context对象，订阅了整个Context对象的组件，会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。
• Context.Provider 父Context对象返回的Provider组件，允许消费组件订阅context的变化。

Consumer【context的消费者组件】

• Class.contextType 申明了contextType属性的组件会被赋值一个Context对象，组件内的this.context可以访问最近Context上的值。
• Context.Consumer 函数组件订阅Context对象的方式，如同contextType之于Class组件。

New Context API-实战

import React, { Component } from 'react';
import CustomContext from './components/button-context';
import NewButton from './components/new-button';export default class NewContext extends Component {constructor(props) {super(props);this.state = {color: '#28a745',        };            }render() {const { color } = this.state;// Provider【context的生产者组件】return (<CustomContext.Provider value={color}><NewButton>new context api</NewButton></CustomContext>                            );    }
}

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CustomContext from '../button-context';export default class NewButton extends Component {// 【context的消费者组件】static contextType = CustomContext;static propTypes ={children: PropTypes.string,    }static defaultProps = {children: '默认文案',   }render() {const { children } = this.props;return (<button type="button" style={{color: this.context }}>{children}</button>        );   }
}

import React from 'react';const CustomContext = React.createContext();export default CustomContext;