React：将子状态传递给父状态

Question

我已经在 React 工作了一年多，我读过 Thinking in react、Lifting state up 和 State and lifecycle。

我了解到React的数据流概​​念是单向数据流。

来自这些页面的引用：

React 的单向数据流（也称为单向绑定）使一切都模块化且快速。

记住：React 是关于单向数据沿着组件层次结构向下流动的。可能无法立即清楚哪个组件应该拥有什么状态。这通常是新手最难理解的部分，所以请按照以下步骤来弄清楚：...

如果您将组件树想象为道具的瀑布，则每个组件的状态就像一个额外的水源，在任意点加入它，但也会向下流动。

据我了解，以下示例是不允许的，因为我将子 state 数据传递给父级。但我看到一些开发人员是这样工作的：

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { fromParent: null };
    }

    addSomething(stateValueFromChild) {
        this.setState({fromParent: stateValueFromChild});
    }

    render() {
        return <Child
                addSomething={(stateValueFromChild) => this.addSomething(stateValueFromChild)}>
                 // ...
        </Child>;
    }
}

class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = { fromChild: 'foo' };
    }

    render() {
        return <Form onSubmit={() => this.props.addSomething(this.state.fromChild)}>
                 // ...
        </Form>;
    }
}

我现在的问题是：

• 真的不允许吗？
• 为什么不应该是模块化和快速的？
• 这真的会阻止单向数据流，变成双向数据流吗？
• 这种方式还会出现什么其他问题？
• 当我将状态提升时，您将如何解决以下情况； 50 个使用该子组件的具体父级，每个父级是否应该为他们正在使用的同一个子级具有相同的初始化子状态？

Answer 1

这真的不允许吗？ 为什么这不应该是模块化和快速的？

很好的问题。这是允许的。让它正常工作有点棘手，因为你在这里有状态同步。在现代前端世界中，状态同步被认为是一项非常具有挑战性的任务。

当您需要在两个方向上同步状态时，就会出现问题。例如，如果此子表单用于编辑列表的某个元素，而您正在更改列表的当前元素。在特定的 UI 更新期间，您将需要子组件来检测这种情况并将其本地状态与来自 props 的新元素同步。只要你没有那个，你就没事。

这真的会阻止单向数据流，变成双向数据流吗？

不，不是。它仍然是单向数据流，因为 React 在设计上不能以任何其他方式工作； UI 更新总是从上到下。在您的示例中，您的孩子触发了一个事件，该事件导致父母更新其状态（完全没问题），这将导致父母 和 孩子的 UI 更新。如果你真的违反了“单向数据流”，你会感觉到的。你会得到一个无限循环或类似的东西。

当我将状态提升时，您将如何解决以下情况； 50 个使用该子组件的具体父组件，每个父组件是否应该为他们正在使用的同一个子组件具有相同的初始化子状态？

是的，这就是他们所说的“提升国家”的意思。您将根状态组织为反映子节点状态的树，然后将状态元素连同回调一起传递给子节点以修改根状态。

Answer 2

这是允许的，您的代码没有任何问题，但我不会称其为将状态从子级传递给父级。您所做的只是调用在 props 中传递的方法，并由带有一些参数的事件触发，在您的示例中是孩子的状态值，但它可以是任何其他变量。父组件对此参数的性质一无所知，它只是接收该值并能够对它做任何事情，例如将它自己的状态更改为另一个。如果 Child 的状态将更改，则 Parent 不会在没有再次触发 onSubmit 事件的情况下接收此更新。但是孩子总是从父母那里收到更新，并在道具发生变化时自动重新渲染。当然，有些道具可能是一些父母的状态。这是行为上的主要区别。

有一篇很好的文章详细解释了这一点：Props down, Events Up

Answer 3

您的问题是绝对正确的，很多时候开发人员（包括我自己）都在为将子组件状态或道具传递给父组件而苦苦挣扎。

我总是在子组件中获取下一个状态或下一个道具的逻辑，并通过使用父组件的处理函数将下一个状态或下一个道具传递给父组件。

import React, { Component } from "react";
import { render } from "react-dom";

class Parent extends Component {
  constructor(props) {
    super(props);
    this.handleSomething = this.handleSomething.bind(this); // binding method
    this.state = {
      fromParent: "foo"
    };
  }

  handleSomething(value) {
    this.setState(prevState => {
      return {
        fromParent: value
      };
    });
  }

  render() {
    return (
      <div>
        <h1>State: {this.state.fromParent}</h1>
        <Child handleSomething={this.handleSomething} />
      </div>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fromChild: "bar"
    };
  }

  render() {
    return (
      <div>
        <button
          onClick={e => {
            const { fromChild } = this.state;
            // do whatever as per your logic for get value from child pass to handleSomething function
            // you can also do same for handling forms
            this.props.handleSomething(fromChild);
          }}
        >
          Click Me
        </button>
      </div>
    );
  }
}

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