这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
React 的设计思路
响应式系统： 监听事件，消息驱动；
转换式系统： 给定输入，求解输出；
原生js写前端页面的痛点：
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码没有组件化。
- UI的数据之间的依赖关系需要手动去维护，如果依赖链路过长，则会遇到“回调地狱问题”。
响应式特点：
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
组件化：
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
组件设计：
- 组件声明了状态和UI的映射。
- 组件有Props/State两种状态。
- “组件”可由其他组件拼装而成。
设计思路：
- 组件内部拥有私有状态State。
- 组件接受外部的Props状态提供复用性。
- 根据当前的State/Props，返回一个UI。
React hooks 的写法
- 介绍基础的 React hooks 写法，以及常用的 hooks。
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>
);
}
useState传入一个初始值，返回一个状态和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。
useEffect传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set时会执行。
有“副作用”的函数，要传入useEffect来执行。副作用代表处理单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage存储数据等。
React 的实现
问题
- JSX语法不符合JS标准语法，浏览器是不支持JSX的。
- 返回的JSX发生改变时，如何更新DOM.
- State/Props更新时，要重新触发render函数。
Virtual DOM(虚拟DOM)
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM 匹配该状态这使懋程康性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
react是声明式编程；
O(n)实现Diff：
- 不同类型的元素——替换；
- 同类型的DOM元素——更新；
- 同类型的组件元素——递归；
React状态管理库
核心思想： 将状态抽离到U外部进行统一管理
状态机： 当前状态，收到外部事件，迁移到下一个状态
推荐：redux、xstate、mobx、recoil
应用级框架
- NEXT.JS
- Modern.js
- Blitz
资料：
【前端专场 学习资料二】第五届字节跳动青训营 - 掘金 (juejin.cn)
React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (reactjs.org)
