我正在研究更改检测机制，但在 reactjs 案例中遇到了一些麻烦。
当react组件中的 props 发生变化时，这个组件会被“重新渲染”（不完全正确，因为 diff 算法，但想法在这里）。
我知道当发生某些事情时，react 浏览其内部虚拟 DOM 以检查新值是否与前一个相同，并根据需要重新渲染其真实组件树。
我的问题是：这是什么东西。
例如，使用 angular 2，我们有 zone.js 允许捕获异步内容（按钮单击、setTimeout 等...）并触发更改检测。
但是现在，我根本不知道它是由 reactjs 触发的。
你能帮助我吗 ？
试着想象这里有两件事：
您需要调用this.setState()，这将更新当前组件内部的状态，并随后触发此组件的更新（自动调用render()）
这将触发这个 COMPONENT 的 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()。
你说
当有事情发生时，react浏览它的内部虚拟 DOM
当一个新的 prop 被传递或者一个状态被改变时。您是在询问内部如何知道何时发生这些情况吗？