react是单向数据流的原因有哪些

这篇文章主要介绍“react是单向数据流的原因有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react是单向数据流的原因有哪些”文章能帮助大家解决问题。 在react中，因为数据在某个节点被改动之后，只会影响一个方向上的其他节点；如果是双向数据流父组件的数据通过props传递给子组件，而子组件更新了props，导致父组件和其他关联组件的数据更新，UI渲染也会随着数据而更新会导致数据紊乱和不可控制，所以react是单向数据流。本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。单向数据流就是：数据在某个节点被改动后，只会影响一个方向上的其他节点。组件的状态：状态可以理解为数据，与props类似，但是state是私有的，并且完全受控于当前组件，因此：组件状态指的就是一个组件自己维护的数据。数据驱动UI：意思很简单，就是：页面所展现的内容，完全是受状态控制的。这也就是mvvm的理念，UI的改变，全部交给框架本身来做，我们只需要管理好数据（状态）就好了。那么在 React 中，如何对状态进行管理呢？这就是本章节的重点，也是整个 React 学习的重点：组件的状态管理。什么是数据流？数据流就是：数据在组件之间的传递。单向数据流是什么意思？单向数据流就是：数据在某个节点被改动后，只会影响一个方向上的其他节点。为什么是自顶向下的？就是说：数据只会影响到下一个层级的免费云主机、域名节点，不会影响上一个层级的节点。用下面的图来说就是：L2数据改变，只会影响到L3，不会影响到L1或者其他的节点。这就是自顶向下的单向数据流。那么我们在react框架中，就可以明确定义单向数据流：规范数据的流向，数据由外层组件向内层组件进行传递和更新。
为什么是单向的？不能是双向的么？因为：我们设想这样的情景：父组件的数据通过props传递给子组件，而子组件更新了props，导致父组件和其他关联组件的数据更新，UI渲染也会随着数据而更新。毫无疑问，这是会导致严重的数据紊乱和不可控制的。
不能是双向的。因此绝大多数框架在这方面做了处理。而 React 在这方面的处理，就是直接规定了 Props 为只读的，而不是可更改的。这也就是我们前面看到的数据更新不能直接通过 this.state 操作，想要更新，就需要通过 React 提供的专门的 this.setState() 方法来做。单向数据流其实就是一种框架本身对数据流向的限制。单向数据流有什么作用呢？
保证数据的可控性。setState 本身的默认行为是什么？其实也很简单，我们都知道，setState可以传递对象形式的状态，也可以传递函数形式的状态。而不论状态是对象形式还是函数形式，它都会先将所有状态保存起来，然后进行状态合并，所有状态合并完成后再进行一次性 DOM 更新。如果状态是对象形式，后面的状态会直接覆盖前面的状态。类似于 Object.assign() 的合并操作。
对于对象状态这一点，我们看下代码：

运行以上代码，Dom 中展示的结果为 1。很显然两次 setState 只有一次生效了。真的吗？其实两次都有生效，只不过这两次 setState 在执行前，被合并成了一个。你不能说到底是那个生效，你可以说两个都没生效，因为最终执行的是被合并的那个代码。如果状态是函数形式，那么依次调用函数进行状态累积，所有函数调用完成后, 得到最终状态，最终进行一次性 DOM 更新。

明显不一样的结果就能说明，两次都执行了，因为函数状态并不会合并，而是以此运行。以上就是setState的默认行为。setState 同步 OR 异步从 API 层面上说，它就是普通的调用执行的函数，自然是同步 API 。因此，这里所说的同步和异步指的是 API 调用后更新 DOM 是同步还是异步的。
通过结果我们可以发现，非常奇怪的一个现象：第一次事件执行显然为异步的，先打印了两个 0，Dom 随之改变为 1 ；
第二次同样是异步的，但是我们发现多次执行没效果 (异步？)；
而第三次又是同步执行的了；先说结论，首先，同步和异步主要取决于它被调用的环境。如果 setState 在 React 能够控制的范围被调用，它就是异步的。比如：合成事件处理函数, 生命周期函数, 此时会进行批量更新, 也就是将状态合并后再进行 DOM 更新。如果 setState 在原生 JavaScript 控制的范围被调用，它就是同步的。比如：原生事件处理函数中, 定时器回调函数中, Ajax 回调函数中, 此时 setState 被调用后会立即更新 DOM 。关于“react是单向数据流的原因有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云技术行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: ie8支不支持html5

这篇“ie8支不支持html5”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“ie8支不支持html5”文章吧。 ie8不支持html5，若是想要…