React学习之进阶上下文十九

在React中很容易根据组件从而跟踪数据流，当你使用一个组件时，可以通过看props来判断用了哪一些东西。

有时候你想直接通过组件树来讲数据传递子元素，而不是通过props一层一层的传递下去，可以使用React提供的contextAPI来处理。

1.为什么一般都不使用Context

虽然React提供了context来处理以上事件 ，但是一般情况下是不需要使用这个API的。

如果你想要你的应用尽可能的稳定的话，请不要使用Context，因为这在React属于一种实验性质的API，在未来的React版本中可能被抛弃。

如果你不是一个非常有经验的开发人员，也请不要使用context,通常都有更好方法来实现我们的要求

如果你硬是要用Context，请在小范围中使用

2.使用context的方法

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.props.color}}>
        {this.props.children}
      </button>
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button color={this.props.color}>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  render() {
    const color = "purple";
    const children = this.props.messages.map((message) =>
      <Message text={message.text} color={color} key={index} />
    );
    return <div>{children}</div>;
  }
}

上面的我们给button设置颜色，竟然要从顶层的组件一步一步的通过props传递下去，很烦。

如果是使用context就会非常简单了

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}
//重点
Button.contextTypes = {
  color: React.PropTypes.string
};
class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}
class MessageList extends React.Component {
//重点
  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message,index) =>
      <Message text={message.text} key={index}/>
    );
    return <div>{children}</div>;
  }
}

//重点
MessageList.childContextTypes = {
  color: React.PropTypes.string
};

通过childContextTypes和getChildContext给MessageList增加context上下文，React会自动将它传递给子组件，如果子组件设置了contextTypes就会获取到这个上下文。如果子组件的contextTypes没有设置的话，context就会是一个空的。

3.父子耦合

context可以让父组件和子组件建立一个直接数据交流的通道，React Router V4就实现了这个功能，这里不详讲。

4.在生命周期函数中使用context

需要将context通过参数传递

constructor(props,context) componentwillReceiveProps(nextProps,nextContext) shouldComponentUpdate(nextProps,nextState,nextContext) componentwillUpdate(nextProps,nextContext) componentDidUpdate(prevProps,prevstate,prevContext)

上面这些函数以后会讲解

5.无状态函数式组件中的context

这里先声明一下函数式组件本身无法使用this.state来进行状态标记控制

const Button = ({children},context) => <button style={{background: context.color}}> {children} </button>; Button.contextTypes = {color: React.PropTypes.string};

当我们将context当做参数传入函数式组件，并且contextTypes进行了类型检测控制，就可以在函数式组件内部使用context

6.更新Context

虽然React有更新Context的函数，但是对不起，依旧不希望你去使用context，这算是警告中的警告了。

在前面写的时候，我就已经使用getChildContext来处理数据，这个函数会在state和props改变时被调用。只要对state和props进行更新就可以实现context的更新。

class MediaQuery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {type:'desktop'};
  }

  getChildContext() {
    return {type: this.state.type};
  }

  componentDidMount() {
    const checkMediaQuery = () => {
      const type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';//这个是用来识别是PC端还是移动端(IE10+)
      if (type !== this.state.type) {
        this.setState({type});
      }
    };

    window.addEventListener('resize',checkMediaQuery);
    checkMediaQuery();
  }

  render() {
    return this.props.children;
  }
}

MediaQuery.childContextTypes = {
  type: React.PropTypes.string
};

当然使用这个更新也会出问题，就是我们的shouldComponentUpdate函数返回false的时候，会导致子组件不更新状态，从而让子组件的context超出控制。

下一篇将讲React中的WEB组件