反应只重新渲染一个孩子
Posted
技术标签:
【中文标题】反应只重新渲染一个孩子【英文标题】:React rerender only one child 【发布时间】:2016-05-17 11:56:40 【问题描述】:在我的表单中,我有一些下拉组件。每当第一个下拉选项更改时,我想更新第二个下拉列表的道具并重新渲染它。我的代码是这样的
handleProjectChange(option)
//this.setState( selectedProject: option )
this.refs.phase.props = option.phases;
//this.refs.forceUpdate()
this.refs.phase.render()
render()
var projectOptions = this.projectOptions
var defaultProjectOption = this.state.selectedProject
var phaseOptions = defaultProjectOption.phaseOptions
var defaultPhaseOption = phaseOptions[0]
var workTypeOptions = api.workTypes().map(x => return value: x, label: x )
var defaultWorkTypeOption = workTypeOptions[0]
return (
<div>
<Dropdown ref='project' options=projectOptions value=defaultProjectOption onChange=this.handleProjectChange.bind(this) />
<Dropdown ref='phase' options=phaseOptions value=defaultPhaseOption />
<Dropdown options=workTypeOptions value=defaultWorkTypeOption />
<button className="btn btn-primary" onClick=this.handleAddClick.bind(this)>Add</button>
</div>
)
但是 props 没有改变,所以它重新渲染了相同的选项。目前我只是通过在其上设置新状态来重新渲染整个表单。有没有办法用新的道具只重新渲染一个孩子/下拉菜单?
【问题讨论】:
【参考方案1】:这样做的方法是将选中的选项放在第一个下拉列表selectedProject
中。
在您的渲染函数中,获取/填充第二个下拉列表中的选项,具体取决于所选项目。
然后流程将是:
用户在第一个下拉菜单中选择一个选项。 这会触发handleProjectChange()
在handleProjectChange()
内部,新选择的选项通过this.setState()
调用进入状态
由于状态改变,react 重新运行整个render()
函数。
在后台,react 发现只有第二个下拉菜单发生了变化,因此 react 只会在屏幕上/DOM 中重新渲染第二个下拉菜单。
【讨论】:
啊,现在我才意识到它只会重新渲染第二个下拉菜单。但是执行 return 之前的逻辑,它可能会因为巨大的下拉列表而变慢,我想我应该缓存它。由于 15 个声望点,我无法支持您的回答。感谢您的回答。【参考方案2】:尽管 React 确实有一个协调算法,可以动态检查每个组件是否应该在每次渲染其父组件时重新渲染,但它并不总是按我们的预期工作。
https://reactjs.org/docs/reconciliation.html
对于此类问题,您有两种选择。你可以使用 React.pureComponent 或 React.useMemo()。
【讨论】:
以上是关于反应只重新渲染一个孩子的主要内容,如果未能解决你的问题,请参考以下文章