React 特性与简介
声明式（对比命令式）
组件化 （组件拥有状态）
跨平台编写（渲染器跨平台）
React 哲学
等待资源加载时间和大部分情况下浏览器单线程执行是影响 web 性能的两大主要原因。
Suspense：弱网环境显示 fallback
ErrorBoundary：本质上是一个高阶组件，当 hasError 为 true 的时候渲染降级 UI
// 实现 ErrorBoundary
// 1. 用 componentDidCatch 捕获错误
// 2. 用 getDerivedStateFromError 更新 state，使得下一次 render 时能够渲染出备用 UI
// 3. 用 props.children 渲染出备用 UI
// 4. 用 props.fallback 渲染出备用 UI
class ErrorBoundary extends React.Component {
state = {
hasError: false,
error: null,
};
static getDerivedStateFromError(error) {
return {
hasError: true,
error,
};
}
componentDidCatch(error, errorInfo) {
console.log(error, errorInfo);
}
render() {
const { hasError, error } = this.state;
const { fallback, children } = this.props;
if (hasError) {
return fallback ? fallback(error) : <div>出错了</div>;
}
return children;
}
}
js 加载会阻塞 dom 更新（时间切片-React fiber）
更新流程
-
Scheduler（调度器）
- 维护时间切片（在浏览器空闲时间执行操作）
- 与浏览器任务调度
- 优先级调度
-
Reconciler （协调器）
-
jsx 转为 fiber
-
fiber 树对比（双缓存）
-
确定本次更新的 fiber
-
-
Renderer （渲染器）
- 渲染器用于管理一棵 React 树
- 使其根据底层平台进行不同的调用
组件
类组件
继承基类＋构造函数
this
生命周期
render 方法
函数式组件
没有生命周期
借助 Hook（16.8）
return JSX
Hook
-
只能在最顶层（按执行顺序判读）
-
只能在函数里用 hook
要注意过期闭包的陷阱
如上例所示，const log = inc( ) 相当于执行了一次 inc 此时 value 为 1，之后再执行 log（）value 也是过期的值了……
父组件给子组件通信
为了避免逐层传递，可以使用一个 wrapper 进行包裹，React.cloneElement(child, commonProps) 实现对子组件的传递
子组件给父组件通信
通过父给子传递一个介质
组件间通信
context & reducer
