简介
React是一个用于构建用户界面的JavaScript库，主要用于构建 UI，起源于Facebook的内部项目，用来架设Instagram的网站，其拥有较高的性能，代码逻辑非常简单
特点：
- 声明式设计 −React采用声明方式，可以轻松描述应用。
- 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 灵活 −React可以与已知的库或框架很好地配合。
- JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
- 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码
优点：
- 快速响应：Fiber
- 组化件：复用性强
- 声明式编程
- 跨平台：只需要修改渲染器
缺点：
- 大型应用需要配套学习状态管理，路由工具
- 不适合小型应用，需要用Babel处理
更新流程
- 调度器（Scheduler）
- 维护时间切片
- 与浏览器任务
- 优先级调度
- 协调器（Reconciler）
- 将JSX转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
- 渲染器（Renderer）
- 渲染器用于管理一棵react树，使其根据底层平台进行不同的调用
基础
React开发web应用
React web应用
- 架构
- 路由
- UI
- 状态
React组件
- 数据
- 通信
- UI
- 性能
组件
Class组件
class组件是一种使用ES6类语法定义的React组件，它继承了React.Component类，可以通过定义render方法来输出组件的内容，同时也可以定义各种生命周期方法来控制组件的行为。 例如：
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>+1</button>
</div>
);
}
}
export default MyComponent;
函数式组件
函数式组件是一种定义React组件的方式，它是一个接收props参数并返回表示组件UI的React元素的JavaScript函数。
函数式组件没有类组件那样的生命周期，也不能定义局部状态（state），所以它更易于理解和使用，尤其在简单的组件或简单场景下使用函数式组件可以减少代码冗余。
React 16.8引入了Hooks，使得函数式组件也能够使用类组件的生命周期和状态，甚至更方便和强大。通过useEffect、useState、useContext等Hooks，函数式组件能够更好地实现组件的复杂逻辑和交互效果。 例如：
import React, { useEffect, useState } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default MyComponent;
比较
函数式相较于class组件
- 代码量骤减，组件干净清爽
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用方便
组件&Hook
将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件组件相当于原子
hook贴近组件内部运行的各种概念逻辑，effect、state、context等，hooks更接近于电子
Hook
Hook是React 16.8引入的一个重要Hook是React 16.8引入的一个重要概念，它使得函数式组件具有了类组件的能力，可以使用类组件的生命周期、状态和其他功能，也可以更方便地处理组件间逻辑和数据共享。
规则&原理：
- 只在函数的顶层使用Hook：确保Hook在每次渲染后都会被调用，从而保证Hook所使用的依赖项是最新的。
- 只在React函数中调用Hook：确保只有React函数才能使用Hook，这样才能与React的更新机制正确连接起来。
- 在条件语句和循环语句中使用Hook时，确保它们在每个分支中都有相同的顺序，并且包含了相同的Hooks：保证每次渲染时的Hook顺序是相同的，从而保证其稳定性。
- 每个自定义Hook都应该只包含单一的功能：保证自定义Hook的复用性和清晰性。
过期闭包问题
在JS中，函数运行的上下文是由定义的位置来决定。当函数的闭包包住了旧的变量值时，就出现了过期闭包的问题
