Question

我是反应的新手。是否只通过 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，组件C可以传递给A。同上，D可以传递给E，A可以传递给A | v B。

父母组件可以将数据传递给他们的孩子，依此类推，直到组件树。
子组件无法将数据传回给父母。

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

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

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

Flux架构允许您在流程中创建循环。数据沿树下行，然后以操作的形式输出到Flux。此操作会更新商店，然后更新订阅该商店的组件。

这使数据保持单向流动。任何组件都可以订阅Flux存储，但如果该组件想要对树中高于其自身的组件进行有意义的更改（例如，如果{{1}}想要更改{{1}}），则必须在其中一个循环中转，而不是简单地向后流回树。

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

1 个答案: