reactjs - 当属性发生变化时，React 会重新渲染整个组件

Question

让我们考虑以下示例:

import React, {Component} from 'react';

class B extends Component {
  render() {
    console.log(`Render runs with ${this.props.paramA}`);
    return (<div>{this.props.paramA}</div> );
  }
}

class App extends Component {

  constructor() {
    super();
    this.state = {paramA: 'asd'};
  }

  handleChange(event) {
    this.setState({paramA: event.target.value});
  }

  render() {
    return (<div>
      <input value={this.state.paramA} onChange={e => this.handleChange(e)}/>
      <label>
      <B paramA={this.state.paramA}></B>
      </label>
    </div>);
  }
}

Here's the gif它是如何工作的。

如果您注意到，为了更新属性的更改，React 需要评估“render”方法。这会导致整个组件更新，而不是真正更改的一小部分(检查 gif，div 元素在 chrome 开发人员工具中闪烁):

TL;DR 根据 React 哲学，应用程序的编写方式应该具有尽可能多的 dummy组件尽可能。这意味着我们有时必须向下传递几个级别的属性(其他时候我们可以使用例如 redux)，这会导致每次顶级组件的属性更改时都会评估许多 render 方法。话虽如此，我经常在现实生活中的 React 应用程序中看到，当例如用户在输入中输入一些内容。好吧，即使这是浏览器的“滞后”，我也不喜欢当组件只需要更新其一小部分时，React 重新评估所有组件(意味着运行它们的渲染方法)的想法。

问题: 难道我做错了什么？有没有办法实现 react 组件，以便它们只更新更改的内容？

Answer 1

听起来您正在寻找 shouldComponentUpdate生命周期 Hook 。

非常不言自明；如果组件只应在特定的 prop/state 更改下重新渲染，您可以在此钩子(Hook)中指定这些内容，否则返回 false。