小编Kei*_*ter的帖子

我最近一直在玩React 16.6.0并且我喜欢React Memo的想法,但我一直无法找到任何关于最适合实现它的场景.React docs(https://reactjs.org/docs/react-api.html#reactmemo)似乎没有暗示将其抛在所有功能组件上的任何含义.因为它需要进行浅层比较以确定是否需要重新渲染,是否会出现对性能产生负面影响的情况？像这样的情况似乎是实施的明显选择:

// NameComponent.js
import React from "react";
const NameComponent = ({ name }) => <div>{name}</div>;
export default React.memo(NameComponent);

// CountComponent.js
import React from "react";
const CountComponent = ({ count }) => <div>{count}</div>;
export default CountComponent;

// App.js
import React from "react";
import NameComponent from "./NameComponent";
import CountComponent from "./CountComponent";

class App extends Component {
  state = {
    name: "Keith",
    count: 0
  };

  handleClick = e => {
    this.setState({ count: this.state.count + …