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

发布时间:2022-06-28 11:55:15 作者:iii
来源:亿速云 阅读:269

这篇文章主要介绍“react是单向数据流的原因有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react是单向数据流的原因有哪些”文章能帮助大家解决问题。

在react中,因为数据在某个节点被改动之后,只会影响一个方向上的其他节点;如果是双向数据流父组件的数据通过props传递给子组件,而子组件更新了props,导致父组件和其他关联组件的数据更新,UI渲染也会随着数据而更新会导致数据紊乱和不可控制,所以react是单向数据流。

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react为什么是单向数据流

单向数据流就是:数据在某个节点被改动后,只会影响一个方向上的其他节点。

1.你是如何理解单向数据流的?
  1. 什么是数据流?

数据流就是:数据在组件之间的传递。

  1. 单向数据流是什么意思?

单向数据流就是:数据在某个节点被改动后,只会影响一个方向上的其他节点。

  1. 为什么是自顶向下的?

就是说:数据只会影响到下一个层级的节点,不会影响上一个层级的节点。用下面的图来说就是:L2数据改变,只会影响到L3,不会影响到L1或者其他的节点。这就是自顶向下的单向数据流。那么我们在react框架中,就可以明确定义单向数据流:规范数据的流向,数据由外层组件向内层组件进行传递和更新。
react是单向数据流的原因有哪些

  1. 为什么是单向的?不能是双向的么?

因为:我们设想这样的情景:

父组件的数据通过props传递给子组件,而子组件更新了props,导致父组件和其他关联组件的数据更新,UI渲染也会随着数据而更新。毫无疑问,这是会导致严重的数据紊乱和不可控制的。
不能是双向的。

因此绝大多数框架在这方面做了处理。而 React 在这方面的处理,就是直接规定了 Props 为只读的,而不是可更改的。这也就是我们前面看到的数据更新不能直接通过 this.state 操作,想要更新,就需要通过 React 提供的专门的 this.setState() 方法来做。

单向数据流其实就是一种框架本身对数据流向的限制。

  1. 单向数据流有什么作用呢?
    保证数据的可控性。

2.setState 是同步还是异步的呀?
  1. setState 本身的默认行为是什么?

其实也很简单,我们都知道,setState可以传递对象形式的状态,也可以传递函数形式的状态。而不论状态是对象形式还是函数形式,它都会先将所有状态保存起来,然后进行状态合并,所有状态合并完成后再进行一次性 DOM 更新。

运行以上代码,Dom 中展示的结果为 1。很显然两次 setState 只有一次生效了。

真的吗?其实两次都有生效,只不过这两次 setState 在执行前,被合并成了一个。你不能说到底是那个生效,你可以说两个都没生效,因为最终执行的是被合并的那个代码。

以上就是setState的默认行为。

  1. setState 同步 OR 异步

从 API 层面上说,它就是普通的调用执行的函数,自然是同步 API 。

因此,这里所说的同步和异步指的是 API 调用后更新 DOM 是同步还是异步的。
react是单向数据流的原因有哪些 

通过结果我们可以发现,非常奇怪的一个现象:

第一次事件执行显然为异步的,先打印了两个 0,Dom 随之改变为 1 ;
第二次同样是异步的,但是我们发现多次执行没效果 (异步?);
而第三次又是同步执行的了;

先说结论,首先,同步和异步主要取决于它被调用的环境。

比如:合成事件处理函数, 生命周期函数, 此时会进行批量更新, 也就是将状态合并后再进行 DOM 更新。

比如:原生事件处理函数中, 定时器回调函数中, Ajax 回调函数中, 此时 setState 被调用后会立即更新 DOM 。

关于“react是单向数据流的原因有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. Vue组件之单向数据流的解决方法
  2. Vue props 单向数据流的实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react

上一篇:react柯里化指的是什么

下一篇:Nodejs中如何读写文件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》