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 改變時重新渲染。

因此，除非傳遞給“Parent”的任何道具發生變化，否則該組件及其整個子代將不會重新渲染。

然而，它的兩個孩子呢？ 可以理解的是，如果“props.fooobar”發生變化，它們都會被重新渲染。 但是如果“props.somethingElse”被改變了呢？ 其中哪些會在此處重新渲染？

Answer 1

如果給Parent組件的除了fooobar之外的另一個 prop 發生變化， Parent組件將被重新渲染，但第一個Child組件也將被重新渲染，因為它被賦予了所有給父組件的 props，所以它的 props 也將被重新渲染改變。

例子

 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>