使用反应检测变化 [英] Change detection with react

问题描述

我正在研究变更检测机制，但在 reactjs 案例中遇到了一些问题.

当在 React 组件中更改 props 时，该组件会被重新渲染"(不完全正确，因为 diff 算法，但想法在这里).

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

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

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

但现在，我根本不知道它是由 reactjs 触发的.

你能帮我吗?

解决方案

试着想象这里有两件事:

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

组件内部的变化

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

外部变化

这会触发这个 COMPONENT 的 props/newProps 被更新，随后你的组件通过在组件内部调用 this.setState() 来更新(componentWillReceiveProps 是 React 的生命周期方法)

class MyComponent 扩展 React.Component {//最初如何将状态设置为 MyComponent构造函数(道具){超级(道具)；this.state = {name: this.props.name};}//要在 MyComponent 内部调用的自己的方法更新名称(e){const newName = e.target.value;if (this.state.name !== newName) {this.setState({name:newName});}}//外部变化componentWillReceiveProps(nextProps) {const newName = nextProps.name;if (this.state.name !== newName) {this.setState({name:newName});}}使成为() {返回(<div>{this.state.name}<输入类型="文本"onChange={this.updateName.bind(this)}值={this.state.name}/>

)}}

值得指出的是 this.setState() 会自动触发 render()，而 this.state.name = 'Bob' 不会触发 render().

I'm studying change detection mechanism and I'm having some troubles with reactjs case.

When props are changed in a react component, this component is "rerendered" (not totally true, because of the diff algorithm, but the idea is here) .

I know that when something happens, react browse its internal virtual DOM to check if the new value is the same as the previous one, and rerender as needed its real component tree.

My question is : what is this something.

For example, using angular 2, we have zone.js that allows to catch async stuff (button click, setTimeout etc...) and to trigger change detection.

But for now, I don't know at all of it's triggered with reactjs.

Can you help me ?

解决方案

Try to imagine there are 2 things here:

• the component (COMPONENT) itself, and
• things outside of the component (OUTSIDE):

A change inside the COMPONENT

You need to call this.setState(), this would update the state inside the current component, and subsequently trigger an update (automatically call render()) of this component

A change from the OUTSIDE

This would trigger the props/newProps of this COMPONENT to be updated, and subsequently your component is updated by calling this.setState() inside the component (componentWillReceiveProps is a lifecycle method from 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>
    )
  }
}

It's worth pointing out that this.setState() would automatically trigger render(), while this.state.name = 'Bob' wouldn't trigger render().

这篇关于使用反应检测变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！