ReactJS 中渲染的性能问题答案

【问题标题】：Performance Issue On Render In ReactJSReactJS 中渲染的性能问题
【发布时间】：2020-05-02 12:52:15
【问题描述】：

根据我所阅读的内容，使用表单元素和状态更新所需的做法如下：

onChange = (event) => {
    this.setState({
        name:event.target.value
    })
}

上面是输入字段的事件处理程序：

<input 
    type="text"
    onChange={this.onChange}
    value={this.state.name}
/>

这就是我们保持状态更新以及输入字段本身的方式。

现在，如果我们在渲染函数中放置一个 console.log(new Date())，我们可以观察到在输入字段中的每次按键时都会调用渲染。

我的问题是，这会导致性能问题，实际上是否存在已知的情况会导致性能问题？还有，有没有更好的办法，这个update-state-re-rendering好像不是最有效的？

编辑 1： 想象一下复杂的表单控件，许多复杂的表单项可以是更复杂的控件，......所以这个输入在这个复杂的组件内部，可以及时呈现。现在，您是否可以期望（您曾经发生过）在状态更新时重新渲染（在键入时）会导致性能问题（可见滞后）。

【问题讨论】：

你也可以使用 shouldComponentUpdate。 reactjs.org/docs/react-component.html#shouldcomponentupdate
谢谢爱德华，我知道了，在这种情况下，我们确实希望更新基本上作为对更新状态的响应。
在这种情况下，我只建议使用 onBlur 而不是 on change 以尽量减少重新渲染的数量，否则它不应该成为问题。如果您遇到可能是由于其他原因导致的缓慢，或者您只是要渲染的元素太多
再次感谢您，我认为我没有以正确的方式表达自己。我不需要修复我的应用程序的任何行为，这只是一个假设性问题。我只是好奇其他开发者的经验。
抱歉，我没有正确理解您。在那种情况下，我会说是的，这是可能的，但是当你有大量的元素要渲染时。

【解决方案1】：

这就是 React 的构建方式。见官方doc。

您可以使用网络检查器和类型来检查正在重新渲染的内容，这只是文本输入框。

是的，它会在每次您输入时调用，但只有正在更改的内容实际上会重新渲染。

【讨论】：

据我了解，渲染方法将重新渲染状态已更新的整个组件，而不仅仅是输入框。
检查状态是否存在差异，仅重新渲染差异。转到这个doc的最后一段，可以看到只有h2标签的文本被重新渲染。看到这个CodeSandbox 并开始在输入框中输入：只有value 属性被重新渲染。
嘿leverglowh，非常感谢您的努力！我明白你在说什么，但如果你在 return() 中有更多控件，它就会全部重新渲染，并且想象这些都是复杂的组件。检查我对问题的编辑，我只是对假设的情况感到好奇。实际上我想知道您/任何人是否有过这种运作方式导致您在界面行为方面出现滞后的经验？
其实，是的。它可能会出现性能问题，例如我发现的this article。是的，react 意识到了这一点，因此 this.