为什么用 React
React 益处:
- 单向数据流:
- 函数式编程:
React 益处:
- 晋升开发效率,升高保护老本:单向数据流,view = fn(data)。依据输出数据的变动扭转界面,数据指向明确,好定位和发现问题,更好的保护。双向绑定数据流凌乱
- 成熟欠缺的社区反对。如 Redux:可追踪,可保护。
- 跨平台
- 页面性能:打包策略
Fiber
- 为什么要用 Fiber
- Fiber 有什么益处
- 原理
为什么用 Fiber,有什么益处
之前的 React 的节点比对和更新,执行副作用是同步进行的,频繁调用会让浏览器没方法响应用户的键盘等事件,渲染时会有卡顿等景象。React 做 Fiber 是为了能疾速响应用户,晋升用户体验。
React 做的事件是让把同步更新改为两阶段,协调:比照节点,失去新的树,提交:更新。模仿原来的栈调度,反对工作的中断和复原。能够在中断时执行更高优先级的工作。
Fiber 是什么,原理
Fiber 是协程的意思,实现了单干式调度,在浏览器闲暇的时候执行,工夫到了就让出,期待下一次调用。requestIdleCallback。
Fiber 也是一个执行单元,对原来的构造进行革新,革新成链表模式,用链表模仿递归调用栈。
Fiber 原理
Hooks
- Hooks 是什么货色,为什么须要它
- Hooks 原理
React 加强了函数组件能力,次要有以下两个方面:
- 代码治理层面:简单组件互不关联的逻辑在一起,会变得难以了解。hooks 相干的逻辑在一起,逻辑更清晰,加强了函数组件的能力。
- 代码复用层面:
React 提倡的组件复用形式是组合,hooks 呈现之前组件复用形式是两种:
- HOC 高阶函数:
长处:加强模式,不会改变原组件,能够抽取共享的业务逻辑。
毛病:多层嵌套,下层解决不可见,不能用 ref - render props: function as a child
长处:共享状态和行为,因为传染组件,比拟灵便
毛病:多个子组件嵌套天堂,可读性差不好保护 - Hooks
扁平,没有多层嵌套,更轻便的复用形式。
Hooks 原理
原理是保护一个 Hooks 链表。组件的 Fiber 链表树中,每个组件保护 hooks 链表和指针,每次触发时程序执行一遍。
Hooks 原理
Redux
用处:
- 跨父子组件通信
- 共享数据管理
益处:可追踪,单向数据流,没有副作用
毛病:滥用会让组件变得难以保护,一些长期状态没必要放进去
React-redux:connect 原理,是一个高阶函数,把 props 和 dispatch 的 action 挂在 props, 订阅 store 更新 props, 刷新组件。
React setState 同步还是异步
React 在更新 / 创立阶段时异步,合成事件内异步。原生绑定事件和定时器内同步。
setState 时依据一个变量判断判断是立刻更新还是丢到队列批量更新。
React 事件
// todo