javascript - react 变化检测

Question

我正在研究变化检测机制，但我在使用 reactjs 案例时遇到了一些麻烦。

当在 React 组件中更改 props 时，该组件将“重新渲染”(不完全正确，因为差异算法，但想法就在这里)。

我知道当某事发生时，React 浏览其内部虚拟 DOM 以检查新值是否与之前的值相同，并根据需要重新渲染其真实组件树。

我的问题是:这是什么东西。

例如，使用 angular 2，我们有 zone.js 允许捕获异步内容(按钮点击、setTimeout 等...)并触发更改检测。

但是现在，我完全不知道它是由 reactjs 触发的。

你能帮帮我吗？

Answer 1

试着想象这里有两件事:

• 组件 (COMPONENT) 本身，以及
• 组件之外的东西(OUTSIDE):

组件内部的变化

你需要调用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()。