具有深层次数据的 ReactJS 数据流

Question

我正在探索 ReactJS 并试图掌握核心概念。我开始拼凑我正在处理的应用程序的原型，它具有以下层次结构

客户
- 地点
  - 地址
  - 联系人

我正在处理的页面将是客户及其所有相关 children 的输入表单。这些部分中的每一个都会有一些文本输入来容纳数据，因此它们似乎是容纳组件层次结构的自然位置。

从我读到的关于 ReactJS 的所有内容来看，如果你要管理状态，你应该在所有控件的共同祖先中进行。这意味着 child 中的任何更改都应该将事件冒泡到状态的守护者以处理更改。然后这应该更新状态，任何更改都将是 re-rendered。这在简单的场景中是有意义的，但这让我想到了稍微复杂的层次结构。

如果许多地址之一发生变化，我是否应该将该事件冒泡到该位置，然后再发送给客户？
如果是这样，告诉州具体地址发生变化的最佳方式是什么？
如果您必须调用层次结构的每个级别，是否会产生大量额外的样板来传播一个简单的更改？
我应该附加到每个文本框上的 onChange 事件，还是应该等到提交表单后收集数据？

React 谈论 ReactLink (https://facebook.github.io/react/docs/two-way-binding-helpers.html) 作为管理更复杂数据绑定的一种方式，但没有给出一个很好的例子来说明如何使用更大的层次结构来管理它。此外，它指出大多数应用程序不需要这个。好吧，这个应用程序真的并不复杂，只是几个具有共享状态的嵌套控件。这就是 React 应该大放异彩的地方，所以我不会立即跳到边缘案例解决方案。

Answer 1

我最近遇到了同样的难题——React 文档在这方面不是很完整。这是我发现的一种工作方式：

var Parent = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    getInitialState: function() {
        return {
            p: 'Hello World',
            q: 'Click me if I\'m pink!',
            r: 'A'
        };
    },
    render: function() {
        return (
            <div className='parent'>
                <p>
                    <h3>Parent</h3>
                    <tt>
                        p: {this.state.p}<br />
                        q: {this.state.q}<br />
                        r: {this.state.r}
                    </tt>
                </p>

                <Child q = {this.linkState('q')}
                       p = {this.linkState('p')}
                       r = {this.linkState('r')} />
            </div>
        );
    }
});
var Child = React.createClass({
    clicked: function() {
        this.props.q.requestChange("Thank you :)");
    },
    render: function() {
        return (
            <div className='child'>
                <h3>Child</h3>

                <p>
                    <input valueLink={this.props.p} />
                </p>

                <p>
                    <tt onClick={this.clicked}>
                        {this.props.q.value}
                    </tt>
                </p>

                <select valueLink={this.props.r}>
                    <option value={'A'}>A</option>
                    <option value={'B'}>B</option>
                </select>
            </div>
        );
    }
});

React.render(<Parent />, document.body)

https://jsfiddle.net/cachvico/p81s75x5/

如果有人有任何改进，我会很高兴听到他们！

Answer 2

我遇到了很多这种尽可能少的组件的副作用。

我必须将 onChange 向下传递到层次结构中的 4-5 级，因为实际状态处于最顶层（容器）。

这是一个例子：

<ProjectContainer>
  <ProjectComponent onProjectChange onProjectTaskChange onCommentChange>
    <ProjectTasksComponent onProjectTaskChange onCommentChange>
      <ProjectTaskComponent onProjectTaskChange onCommentChange>
        <ProjectTaskCommentsComponent onCommentChange>
          <ProjectTaskCommentComponent onCommentChange>

具有深层次数据的 ReactJS 数据流

ReactJS data flow with deep hierarchical data

javascript

data-binding

flux

reactjs