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

前置知识

HTML,JS,CSS基础
基础的数据结构/算法知识，如二叉树，深度遍历等
会使用浏览器提供的DOM API来修改DOM，更新UI

React的历史与应用

应用场景

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

react-three-fiber进行3D场景编写

发展历史

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

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

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

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

React的设计思路

UI编程痛点

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

响应式与转换式

响应式系统

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

前端UI

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

响应式编程

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

组件化

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

状态归属问题：如果要让两个组件的状态共享，状态归属于两个节点向上寻找到最近的祖宗节点

React是单向数据流，父组件传给子组件

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

组件设计

组件声明了状态和UI的映射
组件有Prop（外部传入）/State（内部私有）两种状态
“组件”可由其他组件拼装而成

生命周期

React(hooks)的写法

import React,{useState} from 'react';
function Example(){
//Declare a new state variable,which we'll call"count"
const[count,setCount]=useState(0);
return(
<div>
    <p>
        You clicked {count} time
    </p>
    <button onClick={()=>setCount(count+1)}>
        Click me
    </button>
</div>);
}

useState

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

useEffect

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

有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

Hook使用法则

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

React的实现

problems

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

virtual DOM（虚拟DOM）

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

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

How to Diff?

完美的最小Diff算法，需要O(n^3)的复杂度

牺牲理论最小Diff，换取时间，得到了O(n)复杂度的算法：Heuristic O(n) Algorithm

React状态管理库

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

状态机

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

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