Reactjs 将父状态的一部分复制到子状态是否更好？
随着我的应用程序越来越多，我脑海中有更多关于管理组件状态的讨论。我有一个大的父组件，其中包括几个子组件，因此每个子组件都呈现特定的数据集。到目前为止，在其他组件中，我只严格更新父组件状态，在文档中阅读时，根本不复制状态等等。。正如现在一样，我的孩子们每次渲染几个输入并更新父状态对象。问题-这是正确的，还是我应该在我的子对象中复制一些父对象状态，以便输入直接使用它们并更新父对象？这样做的好处是，它只会在模糊时渲染父对象1次，因为此时它会直接更新在每个用户输入上渲染的父对象状态 我尝试了这两种情况，使用react profiler的性能更符合复制状态的想法——只是因为父级只渲染一次，而不是在每个用户的onchange输入上。这就是为什么我想问是不是出了什么问题。大组件中的每个小组件都是PureComponent，不做无用的渲染Reactjs 将父状态的一部分复制到子状态是否更好？,reactjs,react-state-management,Reactjs,React State Management,随着我的应用程序越来越多，我脑海中有更多关于管理组件状态的讨论。我有一个大的父组件，其中包括几个子组件，因此每个子组件都呈现特定的数据集。到目前为止，在其他组件中，我只严格更新父组件状态，在文档中阅读时，根本不复制状态等等。。正如现在一样，我的孩子们每次渲染几个输入并更新父状态对象。问题-这是正确的，还是我应该在我的子对象中复制一些父对象状态，以便输入直接使用它们并更新父对象？这样做的好处是，它只会在模糊时渲染父对象1次，因为此时它会直接更新在每个用户输入上渲染的父对象状态 我尝试了这两种情况，
class TestParent extends React.Component {
constructor(props) {
super(props);
this.state = {
testObject: {
...many properties
}
};
}
onChange = (evt) => {
thi.setState({
testObject: { ...testObject, [evt.target.id]: evt.target.value
})
}
render(){
<ChildComponent1 onChange={this.onChange} prop1={state.testObject.value1} prop2={state.testObject.value2}
prop3={state.testObject.value3}> </ChildComponent1>
<ChildComponent2 onChange={this.onChange} prop4={state.testObject.value4}> </ChildComponent2>
<ChildComponent3 onChange={this.onChange} prop5={state.testObject.value5}> </ChildComponent3>
<ChildComponent6 onChange={this.onChange} prop6={state.testObject.value6}> </ChildComponent4>
<ChildComponent7 onChange={this.onChange} prop7={state.testObject.value7}> </ChildComponent7>
<textbox value={this.state.testObject} />
}
class ChildComponent1 extends React.PureComponent {
constructor(props) {
super(props);
}
}
render(){
<Input onChange={this.props.onChange} value={this.props.prop1}</Input>
<Input onChange={this.props.onChange} value={this.props.prop2}> </Input>
<Input onChange={this.props.onChange} value={this.props.prop3}> </Input>
}
回答您的问题：您是否应该将传递给子组件的道具添加到componentDidMount上的状态，然后在子组件内更新Blur或onSubmit上的父状态 最佳实践是仅将状态从父组件传递到子组件，该子组件由父组件的子组件共享或由父组件本身使用 在您的示例中，最好在子组件内管理输入值状态，然后使用回调函数在模糊上设置父组件的状态 简化示例：
类父级扩展React.Component{
状态={
child1State:“”//初始化状态不是绝对必要的
};
changeParentState=（值）=>{
此.setState（值）
}
render（）{
返回(
{this.state.child1State}
)
}
}
类Child1Component扩展了React.PureComponent{
陈述={
输入值：“”
}
车把杆=（）=>{
this.props.changeParentState（{child1State:this.state.inputValue}）
}
render（）{
返回(
this.setState（{inputValue:e.target.value}）}
value={this.state.inputValue}
onBlur={this.handleBlur}
/>
)
}
}
ReactDOM.render(
,
document.getElementById（“react”）
)；