关于程序员:同步的-ReactDOMrender异步的-ReactDOMcreateRoot

React三种启用模式


legacy 模式:
ReactDOM.render(<App />, rootNode);
// 这个模式是以后React App应用的模式,然而可能不反对某些新个性
blocking 模式:
ReactDOM.createBlockingRoot(rootNode).render(<App />);
// 过渡模式
concurrent 模式:
ReactDOM.createRoot(rootNode).render(<App />);
// 终极模式

为什么有三种模式


这三种模式中,咱们常常应用的是legacy模式,这种模式在渲染是触发的是同步的渲染链路。blocking模式是legacy模式到concurrent模式的一个过渡,之所以会有这个模式是因为,React团队心愿提供渐进的迁徙模式,而不是断崖式的切换模式。concurrent模式是React的终极模式,也是React团队应用Fiber架构重写外围算法的动机。

依照官网的说法,“久远来看,模式的数量会收敛,不必思考不同的模式,但就目前而言,模式是一项重要的迁徙策略,让每个人都能决定本人什么时候迁徙,并依照本人的速度进行迁徙”。

legacy模式和concurrent模式的不同


React 将会通过批改 mode 属性为不同的值,来标识以后处于哪个渲染模式;在执行过程中,也是通过判断这个属性,来辨别不同的渲染模式。在源码中,咱们能够看到会常常fiber.mode这个值,他就是用来标记以后处于哪个模式下的。举个例子:

function requestUpdateLane(fiber) {
  // 获取 mode 属性
  var mode = fiber.mode;
  // 联合 mode 属性判断以后的
  if ((mode & BlockingMode) === NoMode) {
    return SyncLane;
  } else if ((mode & ConcurrentMode) === NoMode) {
    return getCurrentPriorityLevel() === ImmediatePriority$1 ? SyncLane : SyncBatchedLane;
  }
  ......
  return lane;
}

因而不同的渲染模式在挂载阶段的差别,实质上来说并不是工作流的差别(其工作流波及 初始化 → render → commit 这 3 个步骤),而是 mode 属性的差别。mode 属性决定着这个工作流是零打碎敲(同步)的,还是分片执行(异步)的。

也就是换句话说,legacy模式和concurrent模式的不同就是同步异步的不同

思考一个问题,异步渲染肯定是Fiber吗?


后面有提到,concurrenet模式是React团队应用Fiber重写外围算法的动机,然而重源码的角度来看,不论是不是concurrent模式,Fiber架构曾经深刻到源码了。也就是说在legacy模式下也是存在Fiber,所以Fiber架构师不齐全和异步渲染===的,能够说他同时兼容了同步渲染和异步渲染。


借鉴:修言大神的《深入浅出搞定 React》,心愿文字对大家有帮忙。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据