React 是否需要 Flux 用于单向数据流？

Question

我对 react 很陌生。 react中数据流的一种方式是否只能通过flux（动作和存储）实现？.

  <div id="container"></div>

    var Hello = React.createClass({
    changeState: function (event) {
        this.setState({
            sampleState: event.target.value
        });
    },
    getInitialState: function () {
        return {
            'sampleState': 'World'
        };
    },
    render: function () {

        return ( < div > Hello { this.state.sampleState} 
                    < input onChange ={ this.changeState}> < /input>
                 </div >);
    }
});

ReactDOM.render( < Hello / > ,
document.getElementById('container'));

我已经更改了没有通量的组件的状态。这是否属于单向数据流？

Answer 1

React 的一种数据流方式的想法是数据在应用程序中向下传递。

  A
 / \
v   v
B   D
|   |
v   v
C   E

组件A可以传递数据给组件B，组件B可以传递给C。同样，A 可以传递给D，D 可以传递给E。

• 父组件可以将数据传递给他们的子组件，依此类推。
• 子组件无法将数据回传给它们的父组件。

您的示例没有定向数据流，因为您只使用一个组件。当你改变状态时，数据并没有移动——它被封装在组件中。

  A

如果您在示例中添加另一个组件并将属性向下传递给它，您将引入单向、向下的数据流。

A
|
v
B

Flux 架构允许您在流程中创建循环。数据沿着树向下传递，然后以 动作 的形式传递给 Flux。此操作会更新 store，而后者又会更新订阅该 store 的组件。

A  <- [store]
|        ^
v        |
B -> [action]

这使数据保持在一个方向上流动。任何组件都可以订阅 Flux 存储，但如果该组件想要对树中高于自身的组件进行有意义的更改（例如，如果 B 想要更改 A），它必须合二为一这些循环，而不是简单地逆流而上。