React Context

绝大多数应用程序不需要使用 context.如果你想让你的应用更稳定，别使用context。因为这是一个实验性的API，在未来的React版本中可能会被更改。

一、如何使用

1.安装并引入prop-types
2.父组件中设置getChildContext()

class A extends React.Component {  getClildContext () {    return {      info: 'test'      /** some code */    }  }}

3.父子组件设置childContextTypes

import PropTypes from 'prop-types';A.childContextTypes = {  info: PropTypes.string}

4.子组件定义contextTypes获取context中获取并定义变量类型

B.contextTypes = {  info: PropTypes.string}

5.子组件获取context变量

class B extends React.Component {  render () {    return <div>{this.context.info}</div>  }}

完整demo

import PropTypes from 'prop-types';import React, { Component } from 'react';class A extends React.Component {  getClildContext () {    return {      info: 'test'      /** some code */    }  }  render () {    return <B />  }}A.childContextTypes = {  info: PropTypes.string}class B extends React.Component {  render () {    return <div>{this.context.info}</div>  }}B.contextTypes = {  info: PropTypes.string}

二、使用要点

1.如果一个组件中定义了contextTypes,在下面的生命周期会获得额外的参数

constructor(props, context);componentWillReceiveProps(nextProps, nextContext);shouldComponentUpdate(nextProps, nextState, nextContext);componentWillDidUpdate(nextProps, nextState, nextContext);componentDidUpdate(prevProps, PrevState, prevContext);

2.无状态下引用context

import PropTypes from 'prop-types'const C = ({ children }, context) => {  return (    <h2>{context.info}</h2>  )}C.contextTypes = {  info: PropTypes.string}

3.千万不要更新context，可以通过与state绑定更新context，有风险的如果中间父组件通过shouldComponentUpdate返回false,那么接下来的组件中的context是不会更新得。

class A extends React.PureComponent {  constructor () {    super();    this.state = {      info: 'test'    }  }  getChildContext () {    return {      info: this.state.info    }  }}

4.PureComponent检测不到context的改变

这是一个完整的demo