每次使用相同的道具反应备忘录渲染

Question

我试图在我的功能组件中使用React.memo。它从父级组件获取道具。但是我将相同的道具传递给我的``memo''组件，每次都会渲染。当我使用React.Purecomponent时发生了同样的事情，但是当我使用shouldcomponentupdate时却没有发生rerender：为什么？

我在初始状态下有一个切换变量。

当我调整窗口handleResize的大小并调用了我的标头时，这意味着我的false切换现在为]

我将toggle变量传递给子组件。

然后我从道具中拿走它。

..对不起，我在这个问题上有一些打字错误

Answer 1

您每次都传递一个新的 toggleHamburger道具。

实际上，这是我所见过的React应用程序中最常见的性能杀手。每次传递一个新的闭包作为事件处理程序/回调。

为了解决此问题，我建议使用useCallback()钩子，或者在您的情况下推荐使用方法，因为外部组件是一个类：

class ... {
  toggleHamburger = () => this.setState(({toggle}) => ({toggle: !toggle}));
  ...
    <HamburgerButton toggleHamburger={this.toggleHamburger} />
}

React.memo()如果使用相同的 props进行调用，则用包裹的组件将只渲染一次：

const Comp = React.memo(props => {
  console.log('Rendering...');
  return props.a;
});

const props = {a: 1};
const at = document.getElementById('app');
render();
render();
render();

function render() {
  console.log('Called render()'); 
  ReactDOM.render(<Comp {...props} />, at);
}

<div id="app"></div>
<script src="//unpkg.com/react/umd/react.production.min.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>