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

一、React的历史与应用

历史

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

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

既可以在客户端渲染也可以在服务端渲染

响应式，当状态变更时，UI会自动更新

性能好，快速渲染

高度封装组件，函数式声明

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

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

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

应用

前端应用开发，如facebook ，Instagram , Netflix网页版

移动原生应用开发，如INstagram , Discord , Oculus

结合Electron , 进行桌面应用开发

二、React设计思路

UI编程痛点

状态更新时，UI不会自动更新，需要手动地调用DOM进行更新

欠缺基本的代码层面的封装和隔离，代码层面没有组件化

UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”

响应式和转换式

响应式系统（如监控系统、UI界面）：监听事件、消息驱动

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

响应式系统

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

响应式编程（前端UI）

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

解决痛点

状态更新，UI自动更新

前端代码组件化,可复用，可封装

状态之间的互相依赖关系，只需声明即可

组件化

总结

组件一个是原子组件/或组件的组合

组件内部拥有状态，外部不可见

父组件可将状态传入组件内部，来控制子组件的运转

组件设计

组件声明了状态和UI的映射

组件有Props（外部）/State（内部）两种属性

可被其他组件组成

组件代码

组件内部拥有私有状态State

组件接受外部的Props状态提供复用性

根据当前的State/Props，返回一个UI

三、React（hooks）的写法

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>
    );
}

import react,{useState,useEffect}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
            </button>
        </div>
    );
}

四、React的实现

三个问题

1、JSX 是不符合JS标准的语法

2、返回的JSX改变时，如何更新DOM

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

解决

Problem 1

Problem 2

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 （启发式算法）

不同类型的元素	替换
同类型的DOM元素	更新
同类型的组件元素	递归

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