React 只重新渲染一个 child
React rerender only one child
在我的表单中,我有一些下拉组件。每当第一个下拉选项发生变化时,我想更新第二个下拉选项的道具并重新渲染它。我的代码看起来像这样
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>
)
}
但是道具没有改变,所以它重新呈现相同的选项。目前我只是通过在其上设置新状态来重新渲染整个表单。有什么方法可以只重新渲染一个 child/Dropdown 和新道具?
执行此操作的方法是将所选选项放在第一个下拉列表 selectedProject
中。
在您的渲染函数中,根据所选项目获取/填充第二个下拉列表中的选项。
流量将是:
- 用户在第一个下拉列表中选择了一个选项。
- 这会触发
handleProjectChange()
- 在
handleProjectChange()
中,通过 this.setState()
调用 将新选择的选项置于状态
- 因为状态改变了,React 重新运行整个
render()
函数。
- 在幕后,React 发现只有第二个下拉菜单发生了变化,因此 React 只会在屏幕上/ DOM.
中重新呈现第二个下拉菜单
尽管 React 确实有一个协调算法,可以动态检查每个组件是否应该在其父级的每次渲染中重新渲染,但它并不总是像我们预期的那样工作。
https://reactjs.org/docs/reconciliation.html
对于此类问题,您有两种选择。您可以使用 React.pureComponent 或 React.useMemo()。
在我的表单中,我有一些下拉组件。每当第一个下拉选项发生变化时,我想更新第二个下拉选项的道具并重新渲染它。我的代码看起来像这样
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>
)
}
但是道具没有改变,所以它重新呈现相同的选项。目前我只是通过在其上设置新状态来重新渲染整个表单。有什么方法可以只重新渲染一个 child/Dropdown 和新道具?
执行此操作的方法是将所选选项放在第一个下拉列表 selectedProject
中。
在您的渲染函数中,根据所选项目获取/填充第二个下拉列表中的选项。
流量将是:
- 用户在第一个下拉列表中选择了一个选项。
- 这会触发
handleProjectChange()
- 在
handleProjectChange()
中,通过this.setState()
调用 将新选择的选项置于状态
- 因为状态改变了,React 重新运行整个
render()
函数。 - 在幕后,React 发现只有第二个下拉菜单发生了变化,因此 React 只会在屏幕上/ DOM. 中重新呈现第二个下拉菜单
尽管 React 确实有一个协调算法,可以动态检查每个组件是否应该在其父级的每次渲染中重新渲染,但它并不总是像我们预期的那样工作。
https://reactjs.org/docs/reconciliation.html
对于此类问题,您有两种选择。您可以使用 React.pureComponent 或 React.useMemo()。