reactjs - 扩展 React.Component 的组件中 Key 的效果

问题描述

我创建了一个非常基本的应用程序，并尝试了解 key 在扩展PureComponent和Component.

但是从我发现的情况来看，似乎在扩展 PureComponent 时，这就是我正在寻找的，使用 key 只是跳过更新 b 和 c，并且显然有性能提升。但是在扩展组件时，使用 key 似乎没有性能提升[我不知道如何衡量性能，在这里，在我看来，当方法被调用时，它的性能至少应该差一点更多代码已运行]。

这是我用于测试的代码：

import React, { Component, PureComponent } from "react";

class Child extends PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }

  componentDidMount() {
    console.log("mount", this.props.name);
  }

  componentDidUpdate() {
    console.log("update", this.props.name);
  }

  componentWillUnmount() {
    console.log("unmount", this.props.name);
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ["a", "b", "c"],
    };
  }

  render() {
    return (
      <div>
        {this.state.list.map(name => {
          return <Child key={name} name={name} />;
        })}
      </div>
    );
  }

  componentDidMount() {
      setTimeout(() => {
        this.setState({
            list: ["b", "c", "d"]
          });
      }, 1000)

  }
}

这是扩展 PureComponent 的日志：

unmount a
mount d

这是扩展组件的日志：

unmount a
update b
update c
mount d

所以我的问题是

与 Component extended 一起使用时React.Component，指定键的目的是什么？当我们在这种情况下使用 key 时，它可以有任何性能提升吗？

标签： reactjsreact-component

reactjs - 扩展 React.Component 的组件中 Key 的效果

问题描述

解决方案

推荐阅读