尝试想象这里有两件事：

• 组件（COMPONENT）本身，以及
• 组件之外的东西（外部）：

组件内部的变化

您需要调用this.setState（），这将更新当前组件 内部 的状态，并随后触发此组件的更新（自动调用render（））

与外界的变化

这将触发该组件的props /
newProps进行更新，随后通过在组件内部调用this.setState（）来更新组件（componentWillReceiveProps是React的生命周期方法）

class MyComponent extends React.Component {
  // initially how the state is set to MyComponent
  constructor(props) {
    super(props);
    this.state = {name: this.props.name};
  }

  // own method to be called inside MyComponent
  updateName(e) {
    const newName = e.target.value;
    if (this.state.name !== newName) {
      this.setState({name:newName});
    }
  }

  // changes from the outside
  componentWillReceiveProps(nextProps) {
    const newName = nextProps.name;
    if (this.state.name !== newName) {
      this.setState({name:newName});
    }
  }

  render() {
    return(
      <div>
        {this.state.name}
        <input type="text" 
               onChange={this.updateName.bind(this)} 
               value={this.state.name} />
      </div>
    )
  }
}

值得指出的是，this.setState（）会自动触发render（），而this.state.name =’Bob’不会触发render（）。