reactjs – React中的单向数据流

我已经制作了以下片段来感知本质上的差异,然后似乎单向要求应用程序传播任何状态转换,而双向传统上为你做.

希望我可能在这里误解了这个要点,你能帮助澄清两人之间根本不同的东西吗？

var MyComponent = React.createClass({
  getInitialState: function () { 
    return {
      one: 'Hello',two: 'world',three: ''
    } 
  },handleValueOneChange: function (e) {
    this.setState({one: e.target.value})
  },handleValueTwoChange: function (e) {
    this.setState({two: e.target.value})
  },render: function () { 
    return (
      <div>
        <h1>
        {this.state.one + ' ' + this.state.two}
        </h1>
        <input value={this.state.one} 
          onChange={this.handleValueOneChange} />
        <input value={this.state.two} 
          onChange={this.handleValueTwoChange} />
      </div>
    )   
  }
})

ReactDOM.render(
  <MyComponent />,document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"/>

new Vue({
  el: '#app',data: {
    one: 'Hello',two: 'world'
  },computed: {
    three: function() { return this.one + ' ' + this.two }
  }
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <h1>{{ three }}</h1>
  <input v-model="one" />
  <input v-model="two" />
</div>