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

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

01.React的历史与应用

前端应用开发，如Facebook，Instagram，Netflix网页版；移动原生应用开发，如Discord等；结合Electron，进行桌面应用开发； 2013年，react正式开源

02.React的设计思路

UI编程痛点：

1.状态更新，UI不会自动更新，需要手动地调用DOM,进行更新。

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

3.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”（回调地狱）

4.响应式与转换式

(1).转换式系统：给定输入，求解输出

(2).响应式系统：监听事件，消息驱动

5.组件化：

(1).组件是组件的组合/原子组件

(2).组件内拥有状态，外部不可见

(3).父组件可将状态传入组件内部

6.状态归属问题：

如果想让两个组件的状态共享，那么状态归属两个节点向上寻找到最近的祖宗节点。

1.react是单向数据流

7.组件设计：

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

8.组件有三个时间节点

挂载时
状态改变时
卸载时

03.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} times</p>
<button onClick={() => setCount ( count + 1)}>click me
</ button></div>
);
}

import React, { useState, useEffect } from 'react ' ;
function Example() {
const [count, setCount] = useState( 0 );
/ / Similar to componentDidMount and componentDidUpdate:useEffect(() => {
//Update the document title using the browser APIdocument.title = `You clicked ${count} times `;});
return (
<div>
≤p>You clicked {count} times</ p>
<button onclick={() =>setCount( count + 1)}>Click me
</button></div>
);
}

注意不能在循环、嵌套使用hook

04.React的实现

Problems

1.如何变成标准语法：

const Test = (props) => {
const { url } = props;
return (<div className=" root"s<img src={url}/> </div>
}
}

"use strict"; 
const Test = props => {const {
url
}= props;
return /*#_PURE_*/React.createElement ( ""div"",className: " root"

}，/*#__PURE_*/React.createElement( "img"，{src:url
}));
};

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

Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。从指令型编程变成了声明式编程。 3.如何Diff？

完美的最小Diff算法，需要O（n^3)的复杂度规则：

不同类型的元素，进行替换
同类型的DOM元素，进行更新
同类型的组件元素，进行递归调用

05.React状态管理库

将状态抽离到UI外部进行统一管理，所有的组件都放在Store中，不过并不全面，这样会降低复用性。组件依赖于Store大部分出现在业务代码中。在Store中需要放一些共享组件或者是距离比较远的组件；如果是被某个组件所拥有，则不放在Store中

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

06.应用级框架科普

NEXT.js
MODERN.js
Blitz

响应式系统|青训营笔记