本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1.先看几个页面

如下是典型的前端页面，再看看手机APP, windows操作系统UI界面。

编辑

2.逻辑抽象: 树

UI的核心是一棵多叉树。因此，UI的理论都以树为基础。如UI框架，VUE,REACT也都是以树为其基层，web中叫DOM(文档对象模型 )。此处的文档是树，对象的嵌套结构也是树

编辑

3.在树上跳转，就是路由

想像一只猴子，如果不能在树枝之间跳转，他的行动会很麻烦。

编辑

4. 基于树的UI优化

尽量减少不必要的重新绘制UI.

减小页面跳转的闪烁。

核心思想：

不变的就不要重复渲染。

虚拟DOM(VDOM)与真实DOM(ROM) ,先构建虚拟DOM,然后批量渲染真实DOM.

React使用各种Hook: useState, useCallback, useMemo....目的就是加缓存

5. 前端数据，事件，UI架构目前流行FLUX

将模型数据变量与虚拟DOM绑定，修改数据自动触发虚拟DOM改变，进而触发真实DOM改变。

切记，不要直接修改真实DOM. 真实DOM上的事件应该当抛出来由数据模型处理，处理完后修改模型，进而改变DOM.

flux架构：单向数据流 user/system --> action->dispatcher --> stores ---> views

数据透传与回调:

在树上，每个子结点和叶子结点应当只保存自己的状态，最好不要保存任何状态。这些子

树根保存全局状态。

5.1. props

组件要Pure:内部没有自己的状态，所有状态通过参数props传入。
组件内部发生事件，不要在内部直接改状态，而是把事件抛到上层，一直抛到顶层去处理。可以通过回调函数(委托)一层层回调回去。或者通过事件中心去处理
只有顶层能修改状态，状态修改会传入到组件内部，而导致DOM更新。

5.2. 全局context

react: Context Provider Consumer
VUE: vuex, state

编辑

VUE,React等核心功能

让用户通过编程绑定数据模型变量与vdom和rdom. 达到修改数据模型变量后能自动修改DOM.

数据模型存储

用户事件送达business模块。一般通过事件中心来解决。也可以像数据一样，把回调函数也当数据一样，绑定到RDOM的如OnClick函数等上去。这个回调函数可以只是抛一个事件，也可以直接处理业务逻辑。

编辑

VOM与数据层变量绑定后，要不要直接修改数据变量？

CompA中是否要有自己的业务逻辑处理？

CompA中是否要有数据存储？

6.现实中DOM,Comp,Data，BusinessLogic关系更为复杂

理想中如下

编辑

实际上可能还有

编辑

实际项目可能会是

编辑

7.结论

全局数据应该只能由全局Business模块修改。

组件内数据只应由组件内Business逻辑。

全局Business模块不要直接组件内数据，也不直接调用组件内Business逻辑。可以抛出全局事件

组件内Business模块想修改全局数据，可以抛出事件，或者使用委托。

组件应当监听全局数据变化，监听全局事件。

8.备受推崇的PureComponent架构

编辑

所谓PureComponent架构，是指Component中不包含任务状态数据，也没有任何业务逻辑。组件所需数据由Global数据提供，并只读Global数据。组件不修改Global数据。组件产生的事件后，回调Global提供的函数。抽象成函数是：

void ComponentA(InData1, InData2, ..., EventCallBackA, EventCallbackB,...);

9.动态DOM生成技术

VUE使用模板技术，动态生成HTML代码。

而React使用JSX技术，直接在JS中写HTML。

10.前端知识点

HTML

重要标签 html, head, title, body, script, div， button, input, list, tree, table 事件处理... 直接使用element-ui或者ant design里的吧

CSS

选择器：标签，id,类
布局: display: flext, float, padding, margin, 使用UI库里的布局器
基本属性设置:color, font ...。一般使用UI库，这些也少用

javascript

基本语法，get, post，函数，类，数组，字符串并发与异步，async await, locastorage

框架

VUE

Component[template(v-on, v-bind, v-model, v-for, v-if), props, JavaScript(data, compute, watch, OnMounted), CSS], slot, event($.emit)],
路由，网络axios,存储vuex

react

Compoent(jsx(js中使用html), hook[useState, useEffect, useMemo, useCallback...])
router,
全局存储 context provider/consumer
css: className, 内联style
网络：graphQL
Suspense:拆分组件，延迟加载

React构建DOM原理

1.直接使用JS API创建

使用函数：React.createElement(tagName, props, children)
tagName就是html标签如div, input, span...
props就是标签属性
children就是标签包裹的内容
如this is a input
翻译成react: React.createElement("input", {id:"hello", value:"default"}, "this is a input");
children也可以是React.createElement()

2.使用JSX创建组件组件就是函数

JSX可以在js中写html标签
import React from "react"
export default function Component(props){
const msg = "hello";
return(
<>
{msg}
</>
);
}

Babel会把上代码翻译成

import React from "react"
export default function Component(props){
const msg = "hello";
return React.createElement("span", {id:props.id}, msg);

}
上代码忽略了import 和<></>的翻译。 JSX只能有一个根标签，所以用<></>把其他标签
包裹起来。
有了这个组件后，可以在其他JSX中用来使用组件了。 all in this area can get in props.children

生成VDOM的javaScript对象

Component = {
type: span,
props:{ id:props.id, children:msg} msg，被放在chidren中。
}

3.渲染到html中的一个div里

html里：

JS： ReactDOM.render(Component, docuemnt.getElementById("root"));

react hook原理

编辑

hook,也挂钩技术。把Component渲染与变量更新挂钩。

其他Hook: useState, useCallback, useMemo, useLayoutEffect, useEffect, useRef, useReducer,memo

compB = memo(compA); 让A组件的props不变的情况下不重render。所以组件A最好是Pure组件。

function component(props){
const [login, setLogin] = useState("cosmicpython");
    return (
        <>
            <input type="text" value={login} onChange={(e)=>setLogin(e.target.value)}/>
        <>);
}

input的value只读login. onChange时设置login,触发Component()函数调用，重绘input.

前端路由原理

前端路径不发请求到服务器。

在url中，比如domain.com/api/about?a…

路由中可以用/api/about或者#/la/lb来做。分别叫浏览器路由和hash路由。

第一步：声明路由 About ,表示点击About会修改地址栏里的URL为/a/b

第二步：注册路由表示当/a/b对应要跳转到的组件是About

第三步：运行时路由匹配：运行时，点击声明路由中的About,地址栏路径发生变化，有专门的监听器会监听，监听到后，会在已经注册的路由中里进行匹配，匹配成功的组件，如About就会给它的class里加个active属性。组件可以用这个属性来显示

其他功能:如路由嵌套，路由传递参数（直接利用restful格式路径，或者query parm或者state,也就是浏览器历史), 编程控制路由(push, replace)

React组件

组件语法到官网：React.Component – React

类组件

所有的state, props, refs, 事件函数(箭头函数)都定义在类中

函数式组件

可以是箭头函数(没this哦）

props通过参数获得。state,refs都得用hooks.

前端框架总结