读卡颂《react技术揭秘》随笔o.O!

792 阅读3分钟

React理念

  • 官方介绍
    1. React是构建用户界面的js库

为什么说是一个库而不是一个框架是因为是因为它专注于构建用户界面的视图层,并提供了声明式的组件化开发模式。React 并没有强制性的约定和全局性的架构,它并不涵盖应用的所有方面,比如数据管理和路由。相反,React 提供了一个轻量级、灵活的解决方案,让开发者能够更自由地选择其他库或工具来搭配使用。

  1. 声明式:React 可以轻松创建交互式 UI。为应用程序中的每个状态设计简单的视图,当数据发生变化时,React 将有效地更新和渲染正确的组件。声明性视图使您的代码更可预测、更易于理解且更易于调试。

React的声明式是React的核心理念之一,它通过使用 JSX 描述界面、声明组件和数据驱动的更新,使得前端开发变得更加简单和直观。声明式编程让我们更专注于描述我们想要的结果,而不需要过多地关注实现细节。

  1. 基于组件:构建管理其自身状态的封装组件,然后用于组合他们并创造出更复杂的UI组件,由于组件由js编写而不是模版编写的,因此可以轻松的通过应用程序传递丰富的数据,并保存在dom之外

这里不得不说一个react虽然是由数据驱动UI但他并不是一个mvc框架,在徐超的《react进阶之路》中讲解到"从mvc的分层来看,react相对于v这一层,它关注的是如何根据状态创建可复用的 UI 组件,如何根据组件创建可组合的 UI,当应用较为复杂后,React 依然需要结合其他库(如 Redux、MobX 等)使用才能发挥最大作用。"这句话强调了 React 在 MVC 分层中相对于 V 这一层的定位,以及其侧重于构建可复用 UI 组件的能力,至于为什么会说需要依赖一些状态工具,是因为在大型应用和复杂交互时,你的数据流动是复杂的,我是这样理解的。在一个强调UI=state的库中,你掌握不了你的数据流向就挺难搞的。

  • 卡颂讲解
    这里卡老师主要说了React实现快速响应,以及制约快速响应的因素是什么
    • 什么制约了页面响应
      1. 当遇到大计算量操作或设备性能问题让页面掉帧,导致卡顿。(cpu瓶颈)
      2. 发送网络请求响应慢,需要等待数据才能进行下一步操作导致不能快速响应。(IO瓶颈)
    • react做了哪些事情
      1. web的GUI渲染进程和Js线程是互斥的,所以不得不面临一个问题当你的js脚本执行时间过长,布局样式来不及绘制那你的页面就会卡顿。

        这里React浏览器每一帧的时间中,预留了一些时间给js线程,react利用这部分时间更新组件(在源码中这部分的预留时间时5ms),当预留的时间不够时,react将线程控制权交还给浏览器使其还有时间渲染UI,React则等待下一帧时间到来继续被中断的工作。

        将长任务分拆到每一帧中,一次执行一小段的操作叫“时间分片“,所以解决cop瓶颈的关键是实现时间切片。而时间切片的关键是:将同步更新变为可中断的异步更新

      2. OI瓶颈是目前前端开发者无法解决的,但是react官网给出的答案是将人机交互研究的结果整合到真实的 UI 中

tip: 阅读原文请移步至我敬爱的卡大大的React技术揭秘