响应式系统与React | 青训营笔记这是我参与「第五届青训营」笔记创作活动的第6天一、本堂课重点内容： React

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

一、本堂课重点内容：

React 的历史与应用
React 的设计思路
React （hooks）的写法与 React 实现
React 状态管理库与应用级框架科普

二、详细知识点介绍：

React的历史与应用

应用

1.前端应用开发，如 Facebook，Instagram，Netflix 网页版
2.移动原生应用开发，如 Instagram，Discord，Oculus
3.结合 Electron ，进行桌面应用开发

历史

-2010 年Facebook 在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的 React 的设计
-2011 年Jordan Walke 创造了 FaxJS ，也就是后来的 React 原型：
（1）既可以在客户端渲染也可以在服务端渲染
（2）响应式，当状态变更时，UI会自动更新
（3）性能好
（4）给前端代码组件级别的封装，函数声明
-2012 年在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React
-2013 年React正式开源，在2013 JSConf上Jordan Walke 介绍了这款全新的框架
-2014 年 - 今天生态大爆发，各种围绕 React 的新工具/新框架开始涌现

React的设计思路

UI编程痛点

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

响应式与转换式

转换式系统：给定输入求解输出
如编译器、数值计算

响应式系统：监听事件，消息驱动
如监控系统、UI 界面
响应式系统的步骤：事件->执行既定的回调->状态变更

响应式编程

前端 UI 的步骤：事件->执行既定的回调->状态变更->UI更新
响应式编程：
1.状态更新，UI 自动更新
2.前端代码组件化，可复用，可封装
3.状态之间的相互依赖关系，只需声明即可(如声明a=b+c,当b和c变化时，不用重新手动计算，只需保证每当b和c改变时，a自动更新)

组件化

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

状态归属问题

上图中“当前价格”属于Root节点
状态归属于两个节点向上寻找到最近的祖宗节点
React 是单向数据流，父组件给子组件传数据，而子组件不给父组件传数据

组件设计

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

组件代码

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

生命周期

挂载->状态改变->卸载

React(hooks)的写法

useState

用来声明状态变量

import React, {useState} from 'react';//引入react库，在react中声明新状态要手动调用useState函数
function Example() {
	// 声明一个新变量，命名为count
	const [count, setCount] = useState(0);
    return (
        <div>
       		<p>You clicked {count} times</p><!--读取state中的值-->
			<button onClick={() => setCount(count + 1)}><!--改变state中的值-->
        		Click me
            </button>
        </div>
    );
}

useEffect

函数副作用用useEffect函数去执行，组件每渲染一次，该函数就自动执行一次

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  //类似于componentDidMount和componentDidUpdate:
  useEffect(() => {
    //使用浏览器API更新页面标题
    document.title = `You clicked ${count} times`;//改变了标题，即改变了外部系统的东西，是函数副作用
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React的实现

1.JSX不符合JS标准语法

转译，下图中把左侧的转译成右侧的

2.返回的JSX发生改变时，如何更新DOM

返回的jsx是一种类似于Dom的东西。Virtual DOM（虚拟DOM）是一种用于与真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。它赋予了 React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

状态改变->diffing->re-render Virtual Dom

如何diff?

权衡更新次数少和计算速度快
完美的最小Diff算法，需要 O(n^3) 的复杂度
牺牲理论最小Diff，换取时间，得到了O(n)复杂度的算法：Heuristic O(n) Algorithm

两个树递归比较
不同类型的元素 -> 替换
同类型的DOM元素 -> 更新
同类型的组件元素 -> 递归

3.State/Props更新时，要重新触发render函数

React一个弊病：当一个父组件状态改变的时候，其所有嵌套的子节点，子子节点，都会递归的发生重新的render，会影响性能。

React状态管理库

核心思想

将状态抽离到 UI 外部进行统一管理
缺点：降低组件的复用性

状态机

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

应用场景

哪些东西适合放在状态管理库？
这个状态被整个app所拥有，例如当前用户的头像

应用级框架科普

NEXT.JS

硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev，SWC 等，其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是 "Let's Make Web Faster"

MODERN.JS

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

Blitz

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

三、引用参考：

前端入门 - 工具篇

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