通过react进行更改检测

通过react进行更改检测

尝试想象这里有两件事：

• 组件（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（）。