青岛网站建设新元创想,个人装修设计软件,久久建筑网下载,深圳招工包吃住8000元diff的三大过程
当某个值变化时#xff0c;他从根组件寻找
(key,state,props,context)
当父组件稳定时#xff0c;react会跳过子组件的props的对比
只有当当前组件值改变时#xff0c;从他开始#xff0c;所有的子孙节点都会对比props
props是全等比较#xff0c;所以他从根组件寻找
(key,state,props,context)
当父组件稳定时react会跳过子组件的props的对比
只有当当前组件值改变时从他开始所有的子孙节点都会对比props
props是全等比较所以都会触发重新渲染(比如把组件A移动到父组件的某个兄弟节点位置
那么我diff的过程中如何寻找这个组件呢就必须跨层级递归寻找
非常耗性能)所以React假设没有跨层级的移动组件
(因为实际开发中跨层级的移动组件确实极其的少)
所以diff就可以只比较同级的节点性能从O n^3 变O n在 React 15 中是递归处理虚拟 DOM 的
React 16 则是变成了可以中断的循环过程Scheduler 调度器 —— 收集变化 调度任务的优先级高优任务优先进入 ReconcilerReconciler 协调器 —— 负责找出变化的组件 diff算法 可中断Renderer 渲染器 —— 负责将变化的组件渲染到页面上Fiber 架构的核心即是可中断、可恢复、优先级
作为静态的数据结构来说每个 Fiber 节点对应一个 React element
保存了该组件的类型函数组件/类组件/原生组件等等、对应的 DOM 节点等信息。
作为动态的工作单元来说每个 Fiber 节点保存了本次更新中该组件改变的状态、要执行的工作Fiber 把一个渲染任务分解为多个渲染任务
而不是一次性完成把每一个分割得很细的任务视作一个执行单元React 16 则是变成了可以中断的循环过程每次循环都会调用shouldYield判断当前是否有剩余时间。
requestIdleCallback回调的执行的前提条件是当前浏览器处于空闲状态 去中断
然后 新一轮的调度开始useMemo
https://juejin.cn/post/7253980320357269561?searchId20231209154011153FF01F950F1F4D3A93#heading-2 const childFucntion useCallback(() {action()}, [a, b])
作用用于优化渲染性能。useMemo 会接收一个箭头函数包裹的回调函数和依赖项数组然后返回回调函数的计算结果。
当依赖项数组中的某个值发生变化时useMemo 会重新计算回调函数。如果依赖项没有发生变化useMemo 会返回上一次计算的结果
这样可以避免不必要的计算。如下只有在a或者b发生改变的时候value的值才会重新计算。
useCallback const childFucntion useCallback(() {action()}, [a, b])当依赖数组中的值发生变化时useCallback 会返回一个新的函数实例。否则它将返回上一次创建的函数实例他俩是如何做性能优化的呢
当你去改变父组件中的state就会导致父组件重新构建
而父组件重新构建的时候会重新构建父组件中的所有函数
旧函数销毁新函数创建等于更新了函数地址,
新的函数地址传入到子组件中被props检测到栈地址更新。
也就引发了子组件的重新渲染。useCallBack并不能阻止函数重新创建
,它只能通过依赖决定返回新的函数还是旧的函数,
从而在依赖不变的情况下保证函数地址不变
useCallBack需要配合React.memo使用
useMemo会执行回调函数并且返回结果
但是useCallback不会执行回调函数。他俩都需要 结合React.Memo进行使用
useEffect
useEffect((){},[])setTimeout((){dosomesing
},0)
