React是否需要單向數據流的Flux？

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')); 

我已經改變了一個組件的狀態，沒有flux.Does這是一種數據流？

Answer 1

React的單向數據流的思想是數據順應了應用程序。

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

元器件A可以傳遞數據到組件B，它可以傳遞給C。同樣，A可以傳遞到D，它可以傳遞到E。

• 父母組件可以將數據傳遞給他們的孩子，如此類推組件樹。
• 子組件不能將數據傳遞給父母。

您的示例沒有定向數據流，因爲您只使用一個組件。當你改變狀態時數據不會移動 - 它被封裝在組件中。

A 

如果你加入另一個組件到你的榜樣，並通過性能到它，你將會引入一個單向的，向下的數據流。

A 
| 
v 
B 

Flux體系結構允許您在流程中創建循環。數據沿着樹形結構下達，然後以動作的形式輸出到Flux。此操作會更新商店，後者會更新訂閱該商店的組件。

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

這樣可以使數據以單一方向流動。任何組件都可以訂閱Flux存儲，但是如果該組件想要對樹中高於其自身的組件進行有意義的更改（例如，B想要更改A），則它必須在其中一個週期中循環，而不是簡單地回到樹上。