React 中的单向数据流

Question

React 具有 unidirectional data flow 的概念，与其他框架中的 two-way data binding 形成对比，例如Vue.js。

我制作了以下片段来感受本质区别，然后似乎 unidirectional 要求应用程序传播任何状态转换，而 two-way 通常会为您完成。

希望我可能误解了这里的要点，所以你能帮忙澄清一下二人组之间更根本的分歧吗？

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>

Answer 1

没错。我不熟悉 vue.js，但 angular 也对双向数据绑定做了类似的事情。现在，当你需要 React 时，它可能看起来太乏味了，因为你需要编写所有额外的代码（至少感觉是这样）。

但我注意到，您编写的大多数页面和大多数 html 组件都不需要双向数据绑定。它们对于基于表单的元素是必不可少的，仅此而已。而且大多数页面都不是基于表单的。我认为 angular 团队已经意识到这一事实以及它对应用程序性能的影响程度，因此他们从 1.3 版开始引入了单向数据绑定的结构。

因此，总的来说，这取决于您要尝试做什么并选择最佳解决方案。例如，您可能正在编写一个完全基于表单的应用程序（我以这种方式编写了一个拥抱应用程序），双向数据绑定将提供巨大的帮助。但大多数其他人，单向就足够了。

以下是您可能感兴趣的其他 SO 帖子：

What is two way binding?

Answer 2

Vue.js 大多是单向的。 v-model 是我所知的唯一情况，即 two-way

Answer 3

这里有一些误解post。

Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. https://vuejs.org/v2/guide/forms.html

Vue.js 的 v-model="one" 是（不完全是，但有点）

的快捷方式

v-bind:value="one" v-on:change="one = $event.target.value."

逻辑与在 React 中的实现方式相同

value={this.state.one} onChange={this.handleValueOneChange}

都是一样的只是需要在React中多写boilerplate/repetitive代码

React 中的单向数据流

Unidirectional data flow in React

reactjs

vue.js