这是我参与「第四届青训营 」笔记创作活动的第8天。
响应式系统与React：
一：React的历史与应用
应用：写前端网页、写移动原生应用、进行桌面应用开发
二：React的设计思路
1. UI编程痛点：
a) 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
b) 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
c) UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hll"。
2. 响应式编程：（改进）
a) 状态更新，UI 自动更新。
b) 前端代码组件化，可复用，可封装。”
c) 状态之间的互相依赖关系，只需声明即可。
3. 状态归属于两个节点向上寻找到最近的祖宗节点。
a) React是单项数据流
4. 组件化：（总结）
a) 组件是组件的组合/原子组件
b) 组件内拥有状态，外部不可见
c) 父组件可将状态传入组件内部
5. 组件化：（组件设计）
a) 组件声明了状态和UI的映射。
b) 组件有Props/State两种状态。
c) “组件”可由其他组件拼装而成。
6. 组件代码：（样子）
a) 组件内部拥有私有状态State。
b) 组件接受外部的Props状态提供复用性
c) 根据当前的State/Props,返回一个Ul。
三：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 } f rom
' react' ;
function Example() {
const [ count, setCount] = useState(0) ;
// Similar to componentDidMount and componentD idUpdate:
useEffect(() => {
// Update the document title using the browser 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标准语法
const Test = (props) => {
const { url } = props;
return (<div className="root"><img. src={url} />
</div>)
}
"use strict";
const Test = props => {
const {
url
} = props;
return /*#_ PURE_ */ React. C reateElement("div", {
className: " root"
}，/*#_ PURE_ */React. createElement("img", {
src: url
}));
};
2. 返回的JSX发生改变时，如何更新DOM Virtual DOM (虚拟DOM)
a) Virtual DOM是一-种用于和真实DOM同步，而在JS内存中.维护的一个对象，具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
b) 它赋予了React 声明式的API:您告诉React希望让UI是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在建应用程序时必要的操作中解放出来。
3. State/Props更新时, 要重新触发render函数
五：React状态管理库
1. 核心思想：将状态抽离到UI外部进行统一管理
2. 状态机：当前状态，收到外部事件，迁移到下一个状态
六：应用级框架科普
1. 硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev, SWC等，其同样有Serverless -键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster”
2. 字节跳动Web Infra团队研发的全栈开发框架,内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
3. 无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。
