响应式系统与React | 青训营笔记

msdest
65 阅读4分钟

这是我参与「第五届青训营 」笔记创作活动的第6天

一、本堂课重点内容：

  1. 前端应用开发历程
  2. 移动原生应用开发
  3. 结合 Electron 的桌面应用开发
  4. UI 编程痛点
  5. 响应式与转换式
  6. React 设计与实现 - 组件化
  7. React 设计与实现 – 状态归属问题
  8. React 设计与实现 – 生命周期
  9. 代码介绍
  10. Live Code
  11. React 的实现基本概要
  12. React 的实现 - Problem 1 & 2
  13. React 的实现 - How to Diff
  14. React 状态管理库 - 核心思想
  15. React 状态管理库 - 推荐
  16. React 状态管理库 - 状态机
  17. React 状态管理库 - Modern.js/Reduck
  18. 应用级框架科普

二、详细知识点介绍：

  1. React历史与应用

2010年 Facebook在其 php 生态中，引入了xhp 框架，首次引入了组台式组件的思想，后及后来的React的设计

2011年 2011年Jordan Walke创造了FaxJS，也就是后来的React原型

2012年 2012年在Facebook收购Instagram后，该FaxJS 项目在内部得到使用，Jordan Walke 基于FaxJS 的经验，创造了React

2013年 React正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架

2014年-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现

  1. React的设计思路 - UI编程痛点

    1. 状态更新，U不会自动更新，需要手动地调用DOM进行更新
    2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
    3. 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell”。

  2. React的设计思路 - 响应式与转换式

    前端通常是响应式系统，要监听事件，以消息驱动

  3. React的设计与实现 - 组件化

    1. 组件是 组件的组合/原子组件
    2. 组件内拥有状态，外部不可见
    3. 父组件可将状态传入组件内部

前端UI

事件->执行既定的回调->状态变更->UI更新

1.状态更新，UI自动更新 2.前端代码组件化，可复用，可封装 3.状态之间的相互依赖关系，只需声明即可

  1. React(hooks)写法
import React,{ useState } from 'react';

function Example() {
    const [count,setCount] = useState(0);
    
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });
    
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>setCount(count + 1)}>
                Click me
            </buton>
        </div>
    );
}

useState

传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

useEffect

传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。

Hook使用法则：

  1. 不要在循环、条件或嵌套函数中调用Hook

  2. React的实现

    1. JSX不符合JS标准语法
    2. 返回的JSX发生改变时，如何更新DOM
    3. State/Props更新时，要重新出发render函数

image.png

Virtual DOM(虚拟DOM)

Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一—对应的关系。

它赋予了React声明式的API:您告诉React希望让U是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

image.png

  1. React状态管理库 - 核心思想

将状态抽离到UI外部进行统一管理

  1. React状态管理库 - 推荐

redux、xstate、mobx、recoil

  1. React状态管理库 - 状态机

当前状态，收到外部事件，迁移到下一个状态。

  1. 应用级框架科普

    1. NEXT.JS：Vercel的开发框架，稳定，开发体验好

    2. MODERN.JS：字节跳动Web Infra团队研发的全栈开发框架

    3. Blitz：无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑

三、课后个人总结：

  • 这一章详细深入，即介绍了React的核心要点，也介绍了很多相关的框架和实际应用场景，能够让我很快建立起对React的了解。
avatar
文章
阅读
粉丝