React 学习|青训营笔记

Mr_cold
143 阅读5分钟

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

React 学习|青训营笔记

React的历史和应用

应用

  • 前端应用开发，如 Facebook,Instagram,Netflix网页版
  • 移动原生应用开发，如Instagram，discord
  • 结合Electron，进行桌面应用开发

  • 历史

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

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

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

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

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

    React的设计思路

    UI 编程痛点

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

    • 响应式和转换式

    转换式系统：给定[输入],求解[输出] 编译器 就是一个复杂的转换式系统

    响应式系统：监听事件，消息驱动

    graph LR

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

    监控系统，UI界面是响应式系统

    graph LR

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

    克服UI编程痛点

  • 状态更新，UI自动更新
    “状态更新：UI不会自动更新，需要手动地调用DOM进行更新。”
  • 前端代码组件化，可复用，可封装
    “欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
  • 状态之间的互相依赖关系，只需声明即可
    “UI之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。”

    • React设计 - 组件化

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

    组件设计

    1. 组件声明了状态和UI的映射
    2. 组件有Props(外部)/State(内部)两种状态
    3. “组件”可由其他组件拼装

    组件代码

    1. 组件内部拥有私有状态State
    2. 组件接受外部的Props状态提供复用性
    3. 根据当前的State/Props，返回一个UI

    image.png

    React设计 - 状态归属问题

    状态归属于两个节点向上寻找到最近的祖宗节点。 父节点将函数传给子孙节点。

    React设计 - 生命周期

    image.png

    React(hooks)的写法

    // 该代码可以在点击按钮后立刻增加count值
import React,{useState} from 'react'
    function Example(){
    const [count,setCount] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count+1)}>
                click me
            </button>
        </div>
    );
}

    useState

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

    useEffect

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

    Hook使用准则

    不要在循环，条件或嵌套函数中调用hook

    React的实现

    问题

    1. jsx不符合JS标准语法
    2. 返回的jsx发生变化时，如何更新DOM
    3. state/props更新时，要重新出发render函数（重新加载

    1的解决

    image.png

    通过转译可合乎语法

    2的解决

    Virtial DOM(虚拟DOM)

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

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

    image.png

    上图中，我们在虚拟DOM中修改状态，然后状态的修改从父组件向下传递，随后真实DOM根据修改完后的虚拟DOM作出修改。

    在比对修改过程中，我们需要做一些权衡。 image.png

    React状态管理库

    核心思想：将状态抽离到UI外部进行统一管理

    应用及框架科普

    字节跳动Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择I具的时间。

    无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。

  • next.js
           硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev, SWC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster”
  • modern.js
           字节跳动Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择I具的时间。
  • biltz
           无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。
    • avatar
    文章
    阅读
    粉丝