为什么 React 教程建议将子组件状态存储在父组件中? [英] Why does the React tutorial recommend that child Component states be stored in the parent Component?

问题描述

根据 https://facebook.github.io/react 上的 React 教程/tutorial/tutorial.html:

<块引用>

当你想要聚合来自多个孩子的数据或有两个子组件相互通信，向上移动状态以便它存在于父组件中.然后父母可以通过通过道具回馈给孩子，让孩子组件之间始终保持同步，并与父组件保持同步.

这似乎与每个对象都维护自己状态的良好 OOP 实践相矛盾.

解决方案

当你想要聚合来自多个孩子的数据或有两个子组件相互通信，向上移动状态以便它存在于父组件中.然后父母可以通过通过道具回馈给孩子，让孩子组件之间始终保持同步，并与父组件保持同步.

考虑一个Parent有两个孩子的情况，结构如下

<Child1/><Child2/></父母>

现在 Child1 只有 input 组件，Child2 显示输入中输入的内容 say

在这种情况下，如果您将输入的值保留在 Child1 中，则无法从 Parent 访问它，因为 state 是组件本地的并且是私有属性.因此，将属性保留在 parent 中，然后将其作为 props 传递给 child 以便两个孩子都可以使用它是有意义的

示例代码段

class Parent extends React.Component {构造函数(道具){超级(道具)；this.state = {输入值:''}}handleChange = (val) =>{this.setState({inputVal: val});}使成为() {返回 (<div><Child1 handleChange={this.handleChange} inpVal={this.state.inputVal}/><Child2 value={this.state.inputVal}/>

)}}class Child1 扩展 React.Component {使成为() {返回 (<div><input type="text" value={this.props.inpVal} onChange={(e) =>this.props.handleChange(e.target.value)}/>

)}}class Child2 扩展 React.Component {使成为() {返回 (<div>{this.props.value}

)}}ReactDOM.render(, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></app>

According to the React tutorial at https://facebook.github.io/react/tutorial/tutorial.html:

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

This seems to contradict good OOP practices where each object maintains it own state.

解决方案

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

Consider a case where a Parent has two children, with a structure as follows

<Parent>
    <Child1/>
    <Child2/>
</Parent>

Now Child1 just has the input component, and Child2 displays what was entered in the input say

In this case if you keep the value of the input in Child1, you cannot access it from the Parent as state is local to a component and is a private property . So it makes sense to keep the property in parent and then pass it down to child as props so that both children can use it

A sample snippet

class Parent extends React.Component {
   constructor(props) {
        super(props);
        this.state = {
             inputVal: ''
        }
   }
   handleChange = (val) => {
        this.setState({inputVal: val});
   }
   render() {
        return (
             <div>
                  <Child1 handleChange={this.handleChange} inpVal={this.state.inputVal}/>
                  <Child2 value={this.state.inputVal}/>
             </div>
        )
   }
}

class Child1 extends React.Component {
   
   render() {
        return (
             <div>
                  <input type="text" value={this.props.inpVal} onChange={(e) => this.props.handleChange(e.target.value)} />
             </div>
        )
   }
}

class Child2 extends React.Component {
   
   render() {
        return (
             <div>
                  {this.props.value}
             </div>
        )
   }
}

ReactDOM.render(<Parent/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></app>

这篇关于为什么 React 教程建议将子组件状态存储在父组件中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！