欢迎来到终极前端面试指南。在这一系列帖子中，您将找到前端面试中最需要的主题，以便您在所有这些主题中都做得很好。即使你现在不准备面试，这一系列帖子也会让你随时了解最新情况，并随时准备解释与最衍生的界面构建技术相关的复杂主题。
单向什么？
单向和双向数据流的概念有点容易解释，但同时如果你没有正确的词或相反的用例来举例说明，就会有点棘手。
前端数据流是在呈现页面时在项目的两个或多个部分之间传输的一组数据。这些数据可以用多种方式表示，但今天它已被普遍使用并称为状态。更改状态以及您使用的框架更改状态所采取的操作是我们定义数据流的方式。
最著名的前端开发库， ReactJS使用单向数据流，而VueJS等库使用双向数据流。现在让我们了解它们之间的区别。
VueJS 和 Angular 上的双向数据流
VueJS 和 Angular 等框架使用双向数据绑定，
双向数据绑定是指在组件类和它的模板之间共享数据。如果您在一个地方更改数据，它将自动反映在另一端。
这是一个通过.bind()方法在 Javascript 函数中原生存在的概念，并在这些工具中实现以双向控制状态流。
让我们看一个探索这个概念的示例 VueJS 代码：
new Vue ({ el : ' #app ' , data : { message : ' Hello Vue.js! ' } })
这是 Vue 中的数据，在输入输入时会发生变化。要在 vue 中使用双向数据绑定，我们使用v-model属性。
<div id= 'app' > <p> </p> <input v-model= 'message' > </div>
在这种情况下，输入将以默认值“Hello Vue.js”开始。当我们更改输入字段的值时，我们会自动触发视图的更改，这将自动触发数据的更改。同样，如果我们在应用程序中更改数据的默认值或修改它，由于双向数据绑定的概念，它将反映在视图中。
以一种实用和总结的方式，在这些框架中，当状态发生变化时，视图会发生变化，再次渲染以应用这些变化。同样，当视图收到更改时，状态会强制更新并与屏幕上显示的内容保持同步。
React 上的单向数据流
在 React 库中，我们有单向数据流的概念，即数据仅在一个部分到另一个部分之间传输，而不是反向传输。在 React 的情况下，改变我们在屏幕上看到的内容的唯一方法是修改数据（状态）。修改视图时，状态不会改变，这与 Vue 或 Angular 不同。
单向数据流是一种主要在函数式反应式编程中发现的技术。它也被称为单向数据流，这意味着数据有一种，并且只有一种方式可以传输到应用程序的其他部分。
让我们看一个实际的示例代码：
const { useState } = React const App = () => { const [ input , setValue ] = useState ( "" ); const [ name , setName ] = useState ( ' Chris ' ); handleInput = ( event ) => { setValue ( event . target . value ); } updateName = ( event ) => { event . preventDefault (); setName ( input ); setValue ( "" ); } return ( < div className = "box" > < h1 > Hello, < span > { name } ! </ span > </ h1 > < form className = "form" > < div class = "field" > < label for = "name-1" > Update Name </ label > < div class = "control" > < input type = "text" value = { input } name = "name-1" onChange = { handleInput } class = "input" /> </ div > </ div > < div class = "field" > < div class = "control" > < button onClick = { updateName } class = "button is-dark" > Save </ button > </ div > </ div > </ form > </ div > ) }
让我们看看上面的表格。输入负责更新 h1 标签中描述的名称。请注意，我们必须添加状态的唯一方法是使用按钮进行迭代，这会调用useState()钩子。即使我们改变了输入的值或使用状态作为它的值，如果不调用改变状态的函数，它也没有任何效果。这表示流始终是单向的，视图不能改变状态，反之亦然，一切都是单向的。
结论
今天我们知道两个有些复杂的概念，但随着我们练习和回顾这些概念，它们会变得内在化。如果您有任何问题，请在评论中将它们发送到这里，我将很乐意回答。
这篇文章是一系列文章的一部分，请继续关注并在 dev.to 上关注我，以获取更多关于终极前端面试指南的文章。
在linkedin上关注我：
https://www.linkedin.com/in/aryclenio/