0x1 React 的历史与应用

  1. 应用场景

    1. 前端应用开发,如 Meta、Ins、Netflix 的网页版
    2. 移动原生应用开发,如 Ins、Discord
    3. 结合 Electron 进行桌面应用开发
  2. 发展历史

    1. Facebook 引入了 xhp 框架,其组合式组件的思想启发了 React 的设计

    2. Jordan Walke 创造了 React 的原型—— FaxJS

      FaxJS 的四个特性:

      1. 既可在服务端渲染,也可在客户端渲染
      2. 响应式(Reactive):当状态变更时,其 UI 也会自动更新
      3. 高性能
      4. 结构化
    3. 在 Facebook 收购 Ins 后,Jordan Walke 创造了 React

0x2 React 的设计思路

单向数据流:父组件向子组件单向传递数据

  1. UI 编程痛点

    1. 状态更新时,UI 不会自动更新,需要手动调整
    2. 欠缺基本的代码层面的封装和隔离
    3. UI 之间的数据依赖关系需要手动维护
  2. 转换式与响应式

    1. 转换式:给定输入,求解输出。如:编译器

    2. 响应式:监听事件,消息驱动。如:监控系统

      响应式系统:

      graph LR
      A(事件)-->B(执行既定的回调)
      B-->C(状态变更)
      C--前端 UI-->D(UI 更新)
  3. 响应式编程

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

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

    1. 组件声明了状态和 UI 的映射
    2. 组件有 Props[外部传入]/State[内部私有] 两种状态
    3. 组件可由其他组件拼装而成
  6. 组件代码结构

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

0x3 React (hooks)的写法

import React, { useState, useEffect } from 'react'
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `${count} times`;
})
return (
<div>
<p>You clicked { count } times</p>
<button onClick={ () => setCount(count+1) }>
Click me
</button>
</div>
);
}
  1. 在 React 中声明一个新状态时,需要手动调用 useState

  2. 对 useState 传入一个初始值后,返回一个状态

  3. 对 useEffect 传入一个函数和一个数组。数组是状态的数组,称作依赖项。“副作用”函数

    副作用:代表除了基础函数操作外,还可以进行网络请求、更新 DOM、存储数据等功能

0x4 React 的实现

  1. JSX/TSX 中的代码不符合 JS/TS 的标准

    • 通过转译成一般 JS/TS 代码
  2. 返回的 JSX 发生改变时如何更新 DOM

    • 虚拟 DOM(用于平衡 Diff 算法更少的更新次数更快的计算速度

      Diff 算法:

      • 替换不同类型的元素
      • 更新同类型的 DOM 元素
      • 递归同类型的组件元素
  3. Props/State 更新时要重新触发 render

0x5 React 状态管理库

  1. React 状态管理库

    将组件的状态从根节点中抽离出来,集中到 UI 外部统一管理,构成 React 状态管理库

    如:redux、xstate、mobx、recoil

  2. 状态机

    在当前状态下,接受外部事件后,迁移至下一个状态

0x6 应用级框架科普

  1. next.js——React 开发框架
  2. modern.js——全栈开发框架
  3. blitz——无 API 思想的全栈开发框架'

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

-End-

响应式系统与 React的更多相关文章

  1. 你是如何理解Vue的响应式系统的

    1.响应式系统简述: 任何一个 Vue Component 都有一个与之对应的 Watcher 实例. Vue 的 data 上的属性会被添加 getter 和 setter 属性. 当 Vue Co ...

  2. 前端必读:Vue响应式系统大PK(下)

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/vue-3-reactivity-system ...

  3. vue原理探索--响应式系统

    Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...

  4. Vue 及框架响应式系统原理

    个人bolg地址 全局概览 Vue运行内部运行机制 总览图: 初始化及挂载 在 new Vue()之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期. ...

  5. Vuejs - 深入浅出响应式系统

    Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 Javascript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样非常重要,这样 ...

  6. Vue的响应式系统

    Vue的响应式系统 我们第一次使用Vue的时候,会感觉有些神奇,举个例子: <div id="app"> <div>价格:¥{{price}}</di ...

  7. 【js】vue 2.5.1 源码学习 (七) 初始化之 initState 响应式系统基本思路

    大体思路(六) 本节内容: 一.生命周期的钩子函数的实现 ==> callHook(vm , 'beforeCreate') beforeCreate 实例创建之后 事件数据还未创建 二.初始化 ...

  8. 前端必读:Vue响应式系统大PK

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/vue-3-reactivity-system ...

  9. 一些vue 响应式系统的底层的细节

    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/ ...

  10. Vue3响应式系统api 之 ref reactive

    reactive 接收一个普通对象然后返回该普调对象的响应式代理.等同于2.x的  Vue.observable() Vue3中响应数据核心是 reactive , reactive 中的实现是由 P ...

随机推荐

  1. 详解SSL证书系列(4)免费的SSL证书和收费的证书有什么区别

    上一篇介绍了如何选择SSL证书,更多地是从证书类型角度介绍的.SSL证书有免费和收费的,那么它们之间有什么区别呢? SSL证书免费和收费的主要区别体现在以下几个方面: 1,验证类型 免费SSL证书通常 ...

  2. coast 海岸 单词记忆方法

    coast 海岸 单词记忆方法 coa 扣 想象一个碗扣下去 st站 碗的边和地面的接触面 就是海岸的边 coast 逼近的地方-海岸 coast (n.) - "margin of the ...

  3. ulimit.conf中soft和hard区别及常用配置

    在Linux中,ulimit命令用于限制用户对shell资源的访问,包括进程数.文件打开数等.这些限制可以分为软限制(soft limit)和硬限制(hard limit). 软限制(soft lim ...

  4. SPEAK 510全向麦克风无线蓝牙拾音器产品体验及评测

    产品简介     大家开会的时候,很多人都直接使用手机app了,比如,zoom,腾讯会议等.既方便又快捷.由于手机设备拾音距离有限,也不是针对会议场景做的,所有,在多人会议的时候,问题就出来了.这个时 ...

  5. .NET Aspire Preview 4 发布!

    .NET Aspire是一个有态度的云原生应用开发框架,旨在改善生成.NET云原生应用的体验,并提供一组强大的工具来帮助你生成和运行分布式应用.它允许开发者快速创建属于自己的云原生应用,或改造已有的项 ...

  6. 静态类使用@Resource注解注入

    工作中需要,简单记录一下 @Component public class AccountUtil { private static AccountIdDao accountIdDao; @Resour ...

  7. [置顶] java动态控制线程的启动和停止

    最近项目有这样的需求:原来系统有个计算的功能,但该功能执行时间会很长(大概需要几个小时才能完成),如果执行过程中出现了错误的话,也只能默默的等待错误执行完成才行,无法做到动态的对该功能进行停止. 我了 ...

  8. java -jar xxx.jar命令执行jar包时出现Error: Invalid or corrupt jarfile xxx.jar解决方案

    MANIFEST.MF清单文件内容: Manifest-Version: 1.0 Ant-Version: Apache Ant 1.8.2 Created-By: 1.8.0_60-b27 (Ora ...

  9. 【2310. 个位数字为 K 的整数之和】背包

    import java.util.*; class Solution { public static void main(String[] args) { Solution solution = ne ...

  10. JavaScript自定义响应式对象

    1. 引言 这里的响应式对象是指JavaScript中的变量与HTML中的内容相绑定,变量更新则内容更新,也叫数据绑定 此时不得不说MVVM架构,MVVM架构思想的实现步骤如下: 模型(Model): ...