[英]React re-render via setState vs direct DOM manipulation?
我已经与 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
生命周期钩子的创建目的。 如果你知道你的组件不应该总是重新渲染,那么你可以添加这个生命周期钩子来检测哪个状态正在改变。 如果您不关心它,您可以return false
并且buildComplexHTMLFromData
函数将永远不会运行。
编辑:
它们还公开了一个名为PureComponent
的基类,它为您在PureComponent
处理shouldComponentUpdate
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.