React特性与简介|青训营笔记

40 阅读1分钟

React 用于构建用户界面的JavaScript库 React 特点

image.png

image.png

React哲学_更新流程 Scheduler(调度器) 维护时间切片(类似requestldleCallback) 与浏览器任务调度 优先级调度 Reconciler(协调器) 将JSX转化为 FiberFiber 树对比((双缓存) 确定本次更新的 Fiber Renderer(渲染器) 渲染器用于管理一棵 React 树,使其根据底层平台进行不同的调用。

image.png

image.png

image.png 组件 Class 组件 ◎继承+构造函数this 生命周期render方法

函数式相较于Class的优点 代码量骤减,组件干净清爽。没有复杂的生命周期。 支持自定义hook,逻辑复用方便。

组件和 Hook的关系 我们将UI拆成多个独立单元,这些单元组合可以构 成多种视图展示,这些独立单元就是组件。组件相当于原子。 hook贴近组件内部运行的各种概念逻辑,effect、 state、context等。hooks更贴切于电子。

image.png

Hook规则&原理 只能在React函数中调用Hook 在React函数组件中或自定义 Hook中调用自定义Hook 必须以use开头 Hook中的 state是完全隔离的

image.png

image.png

image.png

父组件给子组件通信_案例 o知道子组件的表现,直接通过props传递即可不知道具体子组件表现呢? props.children image.png

image.png

image.png