React.memo行为

Question

考虑以下简单的组件：

import React, { Fragment, memo } from 'react';

function Parent(props) {
  return (
    <Fragment>
      <Child {...props} />
      <Child foobar={props.foobar} />
    </Fragment>
  );
}

export default memo(Parent);

import React, { memo } from 'react';

function Child({ foobar }) {
  return (
    <p>{foobar}</p>
  );
}

export default memo(Child);

据我所理解，用React.memo()包装组件将确保它只有在其道具发生更改时才会重新呈现。

因此，除非传递给“父”的任何道具发生变化，否则该组件及其子代的整个谱系将不会被重新呈现。

但是，它的两个孩子呢？可以理解，如果"props.fooobar“发生变化，它们都将被重新呈现。但是如果"props.somethingElse“改变了呢？他们中的哪一个会在这里重新渲染？

Answer 1

如果fooobar提供给Parent组件的另一个支柱发生了变化，那么Parent组件将被重新呈现，但是第一个Child组件也将被重新呈现，因为这是给父组件的所有支持，所以它的道具也会改变。

示例

​

const { memo, Fragment } = React;

const Parent = memo(props => {
  console.log("Rendered Parent");
  return (
    <Fragment>
      <Child {...props} />
      <Child foobar={props.foobar} />
    </Fragment>
  );
});

const Child = memo(({ foobar }) => {
  console.log("Rendered Child");
  return <p>{foobar}</p>;
});

class App extends React.Component {
  state = {
    foobar: "foo",
    bazqux: "baz"
  };

  componentDidMount() {
    setTimeout(() => this.setState({ foobar: "bar" }), 1000)
    setTimeout(() => this.setState({ bazqux: "qux" }), 2000)
  }

  render() {
    const { foobar, bazqux } = this.state;

    return <Parent foobar={foobar} bazqux={bazqux} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

​