React.memo()什么时候比较组件道具？

Question

据我所知，React.memo()比较道具以查看组件是否应该重新呈现。但是，如果以前的道具和当前的道具是相同的，即使组件没有被React.memo()包装，React也不会重新呈现组件。那么，react.memo()在组件重新评估之前，而不是在重新呈现之前，比较道具？

Answer 1

它在呈现之前对它们进行比较，与不使用React.memo()的情况相同。

但是如果你的道具没有改变的话，你就不能完全正确地认为，如果你的道具没有改变，你的组件就不会重新呈现。如果您的父组件的道具/状态发生了更改，它将重新呈现该组件的所有子组件(和孙辈)，即使它们的道具没有更改。

因此，在其中一个子程序上使用React.memo()可以防止树的分支重新呈现，如果它的道具实际上没有改变。

Answer 2

，但是如果以前的道具和当前的道具是相同的，即使组件没有被React.memo()包装，React也不会重新呈现组件。

当然，在功能组件中都是这样的：

​

const Child = () => {
  console.log('child rendering');
  return 'foo';
};
const App = () => {
    const [parentState, setParentState] = React.useState(0);
    React.useEffect(() => {
      setParentState(1);
    }, []);
    return (
      <div>
        <div>{parentState}</div>
        <Child />
      </div>
    );
};

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

​

在课堂组件中：

​

class Child extends React.Component {
  render() {
    console.log('child rendering');
    return 'foo';
  }
}
class App extends React.Component {
  parentState = 0;
  componentDidMount() {
    this.setState({ parentState: 1 });
  }
  render() {
    return (
      <div>
        <div>{this.parentState}</div>
        <Child />
      </div>
    );
  }
};

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

​

除非您已经设置好以某种方式回溯组件，否则组件将重新呈现，即使道具和状态都没有改变。

React.memo所做的比较，以确定在调用组件时是否应该重新呈现组件。也就是说，如果你有

const SomeComponent = React.memo(function MyComponent(props) {
  // ...

然后，当引擎在呈现时遇到对SomeComponent的调用时，SomeComponent将执行比较，例如：

const App = () => {
  return (
    <div>
      <SomeComponent />
    </div>
  );
};

上面，每当应用程序重新呈现时，将再次调用SomeComponent。然后，React.memo决定是否需要重新运行基础组件，或者是否可以重用上一个呈现返回的值。如果它确实需要重新运行，那么它将运行原始的MyComponent。