React 原理分析

优质博文：IT-BLOG-CN

一、简介

为什么我要用react？JQuery也挺好的呀？
1、因为浏览器和JavaScript一直在更新，新版前端框架可以更好对接新的API，更好的利用浏览器的能力， 提供更新潮强大的功能。
2、react有其庞大的生态系统，如插件、工具、库等，对开发者更省力

二、React主要发展历程

2011 Facebook内部使用
2013 Facebook开源
2015 Facebook发布React Native（干掉了iOS和Android开发岗位）
2017 React发布Fiber架构
2019 React16.8引入Hooks
2022 React 18 发布Concurrent Mode和Server Component
2024 React 19RC发布

三、React特性

1、组件化： 代码复用度高
2、虚拟DOM： 减少不必要的DOM操作和渲染
3、JSX： 易于理解和使用
4、跨平台： ReactNative
5、Concurrent Mode： 可中断的异步更新

四、React原理

React15架构：
1、Reconciler（协调器）—— 负责找出变化的组件
2、Renderer（渲染器）—— 负责将变化的组件渲染到页面上

此架构弊端： Reconciler是递归渲染，过程不可中断，当更新任务过大用时过久就会造成页面卡顿

React16架构：
1、Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入
2、ReconcilerReconciler（协调器）—— 负责找出变化的组件
3、Renderer（渲染器）—— 负责将变化的组件渲染到页面上

此架构基于Fiber，时间切片，优先级调度，实现了渲染过程的可中断更新，在浏览器资源上限内最高效率流畅更新页面。

实现步骤：
1.虚拟DOM一个用来描述 UI 结构的 JavaScript 对象，用于抽象表示浏览器中真实的DOM节点，体积轻量，不绑定实际DOM具有的属性和方法。

// 虚拟 DOM 对象
const virtualDOM = {
   
  type: 'h1',
  props: {
   
    className: 'greeting',
    children: