javascript - 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() 中将确保它仅在其 Prop 发生变化时才重新渲染。

因此，除非传递给“Parent”的任何 Prop 发生变化，否则该组件及其整个子组件不会被重新渲染。

然而，它的两个 child 呢？可以理解，如果“props.fooobar”发生变化，它们都将被重新渲染。但是如果“props.somethingElse”被改变了怎么办？其中哪些将在此处重新呈现？

Answer 1

如果给 Parent 组件的 fooobar 之外的另一个属性发生变化，Parent 组件将被重新渲染，但是第一个 Child 组件也将被重新渲染，因为它被赋予了所有给父级的 Prop ，所以它的 Prop 也会改变。

示例

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>