如何使用ReactJS避免递归方法中的许多重渲染

Question

我拥有此组件https://codesandbox.io/s/l2nq31r1mz，当我单击列表元素时，它会完全重新呈现。如何避免许多重新渲染？您可以在控制台中看到重新渲染的数量

Answer 1

如果将console.log(render${this.renderTimes++});调用放到render()函数中，您将看到该组件仅渲染一次，并且在每个导航项上单击时，它将仅重新渲染一次。尽管generateMenu()被多次调用，但React对此进行了优化，并仅触发了一个组件的重新渲染。

Answer 2

setState将触发一次重新渲染，并且每次您调用 generateMenu 并在其自身内部调用 generateMenu 时，它都会重新呈现链接。每次单击该链接，它都会运行 generateMenu 6次。

要完全停止渲染，也许可以使 generateMenu 成为新组件