react context上下文使用

序言

首先介绍下什么是上下文以及为什么要使用上下文，react状态一般情况是由父组件通过props向子组件传递的，那么如果出现嵌套比较深的组件，并且只是最后一个子组件需要使用顶层组件的状态这样一级级传递会显得麻烦而且不好维护，上下文的作用是在当前组件声明一个公共的状态，不需要通过props的传递，子组件需要的时候去公共里面取可以，下面来讲解下具体使用方法。

这里创建一个顶层组件./provider.js

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

class Provider extends Component {
  constructor (props) {
    super(props);
  }
  getChildContext() { // 必要步骤1使用getChildContext方法声明存入上下文的内容
    return {
      name: 'hello world'
    };
  }
  
  render() {
    return this.props.children
  }
}

Provider.childContextTypes = { // 必要步骤2给当前类赋值childContextTypes属性并用prop-types进行校验
  name: PropTypes.object
}

export default Provider;

注意步骤1和步骤2为固定格式，一定不要写错

子组件./controlPanel.js

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

class ControlPanel extends Component {
	render() {
		const { name } = this.context;
		return (
			<h1>{name}</h1>
		);
	}
}
ControlPanel.contextTypes = { //步骤1当前类赋值contextTypes属性并用prop-types校验
	name: PropTypes.object
}

export default ControlPanel;

子组件写法格式也是固定的，给当前类赋值contextTypes属性，然后this.context就可以拿到上下文了。

总结

react的上下文可以大大简化这种非必要的属性传递过程，不过写法较为复杂，具体是否需要使用看实际场景。