Reactjs React中的单向数据流

React

具有

单向数据流

的概念，与来自其他框架（如

Vue.js

的

双向数据绑定

相反

我制作了以下代码片段来感受本质上的区别，然后看来

单向的

命令应用程序传播任何状态转换，而

双向的

通常为您这样做

希望我可能弄错了这里的要点，那么你能帮助澄清两人之间更根本的分歧吗

var MyComponent=React.createClass({
getInitialState:函数（）{
返回{
一个：“你好”，
二:"世界",，
三个：''
} 
},
HandleValueOne更改：功能（e）{
this.setState（{one:e.target.value}）
},
handleValueTwoChange：功能（e）{
this.setState（{two:e.target.value}）
},
呈现：函数（）{
返回(
{this.state.one+''+this.state.two}
)   
}
})
ReactDOM.render(
，document.getElementById（'app'）
)

---

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

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

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

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

---

Vue.js主要是单向的

v-model

是我所知的唯一一个双向的例子，这篇文章中有一些误解

尽管有点神奇，v-model本质上是糖的语法 更新用户输入事件的数据，并特别注意某些边缘 案例

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中编写更多的样板/重复代码