反应只重新渲染一个孩子答案

【问题标题】：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 没有改变，所以它重新渲染了相同的选项。目前我只是通过在其上设置新状态来重新渲染整个表单。有没有办法用新的道具只重新渲染一个孩子/下拉菜单？

【问题讨论】：

标签： reactjs rerender

【解决方案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()。

【讨论】：