我已经使用 React 工作了大约 6 个月,过去一直困扰我的是重新渲染的工作方式。
下面是一个传统的组件,它有一个输入框并将数据发送到服务器,其值被一些其他表单使用,以及多个几乎静态的 HTML 元素,这些元素从不使用或很少更改。我说的很少,因为可以在 componentWillMount()
方法中构建静态元素并将其存储在变量中。但要让这个问题更复杂一点,渲染应该包含对 buildComplexHTMLFromData
方法的调用。
buildComplexHTMLFromData = (data) => {
// Lot of javascript to build the boxes based on the initial or data
// that changes so rarely
// array.map.filter.find etc.
return (
<div>
//Complex HTML element 1
//Complex HTML element 2
//....
//....
//Complex HTML element n
</div>
)
}
sendDataToBackend = (event) => {
this.setState(
{ value: event.target.value },
() => this.functionThatSendsDataToBackend()
)
}
render() {
<div>
// Active input that sends data to the backend
<input
value={this.state.value}
onChange={this.sendDataToBackend}
/>
{this.buildComplexHTMLFromData()}
</div>
}
现在在输入框更改时设置状态甚至会触发再次执行复杂 javascript 的 buildComplexHTMLFromData
方法。我听说 React 通过在 DOM 之间进行差异化来有效地重新渲染做了一些聪明的事情,但无论如何都会执行这个 javascript。
另一方面,可以使用两种 sendDataToBackend
方法实现相同的功能,如下面的代码片段所示。然而,这确保只有目标输入元素被更改,而不会触及已经呈现的元素或在 buildComplexHTMLFromData
方法上执行任何 javascript。
buildComplexHTMLFromData = (data) => {
// Lot of javascript to build the boxes based on the initial or data
// that changes so rarely
// array.map.filter.find etc.
return (
<div>
//Complex input box 1
//Complex input box 2
//....
//....
//Complex input box n
</div>
)
}
sendDataToBackend = (event) => {
//First strategy
var element = document.getElementById("persistable-input");
element && element.value = event.target.value
//Second strategy
this.persistableInput.value = event.target.value
}
render() {
<div>
// Active input that sends data to the backend or for other forms
<input
id="persistable-input"
ref={(elem) => { this.persistableInput = elem }}
value={this.state.value}
onChange={this.props.persistedValue}
/>
{this.buildComplexHTMLFromData()}
</div>
}
我不知道我是否遗漏了什么,或者这是否对性能影响很小,但我觉得这对复杂的组件来说可能会很费力。我看了多篇关于 React 的协调范式的文章,但它似乎没有解决这个问题。
如果有人能对 React 的这个领域有所了解,我将不胜感激,因为在大多数情况下,我正在寻找一些关于 React 中的性能协调的很酷的提示和输入。
提前致谢。
最佳答案
这正是 shouldComponentUpdate
的内容生命周期 Hook 是为创建的。如果你知道你的组件不应该总是重新渲染,那么你可以添加这个生命周期钩子(Hook)来检测哪个状态正在改变。如果您不关心它,您可以返回 false
并且 buildComplexHTMLFromData
函数永远不会运行。
编辑:
他们还公开了一个名为 PureComponent
的基类为您处理 shouldComponentUpdate
。
关于javascript - 通过 setState 与直接 DOM 操作 react 重新渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46570880/