Лучше ли дублировать часть родительского состояния на детей?

Question

По мере того, как мое приложение становится все больше и больше, в моей голове все больше обсуждается вопрос об управлении состоянием компонента. У меня есть большой родительский компонент, который включает в себя несколько дочерних компонентов, поэтому каждый из них отображает определенный набор данных. До сих пор в других компонентах я строго обновлял только родительское состояние и вообще не дублировал состояние, как я читал в документах и ​​т. Д. .. Как и сейчас, мои дети рендерит по несколько входов каждый и обновляет родительский объект состояния. Вопрос - это правильно, или я должен дублировать некоторые родительские состояния в моих дочерних элементах, чтобы входные данные использовали их напрямую, а действие onBlur обновляет родительский элемент? Преимущество состоит в том, что он будет отображать родительский элемент только один раз в onBlur, так как он в данный момент обновляет непосредственно родительское состояние, которое он отображает при каждом вводе пользователем.

Я пробовал оба случая, и производительность с использованием профилировщика реакциибольше для идеи дублирующего состояния - только потому, что родительский модуль рендерится только один раз, а не на каждом пользовательском вводе onchange. Вот почему я хочу спросить, если что-то не так. Каждый другой маленький компонент, который является частью большого, является PureComponent и не выполняет бесполезный рендеринг.

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>
}

Answer 1

Чтобы ответить на ваш вопрос: следует ли брать реквизит, переданный ребенку, и добавлять его в состояние на componentDidMount, а затем обновлять родительское состояние onBlur или onSubmit в дочернем компоненте?

Рекомендуется только передаватьсостояние от родительского компонента к дочернему компоненту, который либо совместно используется дочерними элементами родителя, либо используется самим родителем.

В вашем примере было бы лучше управлять состоянием входного значения в дочернем компоненте, чем использоватьфункция обратного вызова setState для родительского компонента на размытие.

Упрощенный пример:

class Parent extends React.Component {
    state = {
        child1State:'' // initializing state is not strictly necessary 
    };
    
    changeParentState = (value)=>{
        this.setState(value)
    }

    render(){
        return(
            <div>
                <Child1Component 
                    changeParentState={this.changeParentState}
                />
                {this.state.child1State}
            </div>
        )
    }
}

class Child1Component extends React.PureComponent {
    state={
        inputValue:''
    }
    handleBlur=()=>{
        this.props.changeParentState({child1State : this.state.inputValue})
    }
    render(){
        return (
            <input 
                onChange={(e)=> this.setState({inputValue:e.target.value})}
                value={this.state.inputValue}
                onBlur={this.handleBlur}
            />
        )
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById("react")
);

<div id='react'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>