React哲学
React主要是用来解决浏览网页卡顿问题,在听课时我了解到React不一定是用起来快的,但是在页面有大量数据需要渲染下用起来是流畅的,它主要解决的问题是等待资源加载时间和大部分情况下浏览器单线程执行这两大影响web性能的问题.
| 等待资源加载 | 浏览器线程执行 |
|---|---|
| React.Lazy | 异步更新 |
| React.Suspense | 时间切片 |
| ErrorBoundary | React Fiber |
React由三大部分Scheduler,Reconciler,Renderer这三者组成
| Scheduler | Reconciler | Renderer |
|---|---|---|
| 维护时间切片 | 将JSX转换为Fiber | 渲染器用于管理一棵React树 |
| 与浏览器任务调度 | Fiber树对比(新旧对比) | |
| 优先级调度 | 确定本次更新的Fiber |
用React开发Web应用
- 架构:(打包配置JSX->babel->Js),加载优化与错误降级
- 路由:React Router
- UI: 组件库
- 状态管理:context redux mobx
Hook 过期闭包问题
- 在Js中,函数运行的上下文是由定义的位置决定的,当函数的闭包包住了旧的变量值时,就出现了过期闭包
- 在React中useEffect里的解决方案是传入第二个参数,当第二个参数里的值变化时,就会触发useEffect里的内容更新
React常见的API及作用
这里记录几个我感觉很有感悟的API
| React.cloneElement | 克隆并返回新React元素,并且可以为新元素添加额外props | |
|---|---|---|
| React.Children.[Fn] | map遍历并返回;forEach仅遍历;count子组件数量;only是否只有一哥子节点 | |
| React.createRef | 可以用来存储定时器,这样在组件更新后不受影响 | |
| React.forwardRef | 转发ref和与useImperativeHandler联合使用暴露方法 | |
| React.lazy | 实现组件动态加载 | |
| React.Suspense | 组件加载过程优雅降级 |
如何划分组件
一个页面可以拆分成多个模块,这样便于维护
通信
父传子
- 父组件通过props传递给子组件
- context
子传父
- ref与useImperativeHandler
组件间共享信息
- context&reducer
组件优化
- context里的值更新,会影响组件更新
- memo
- useMemo
- useCallback(解决没有相同的函数问题
组件挂载位置
- container与ref
- createPortal(将真实DOM的渲染位置改变了),冒泡时是冒泡到React树上的父组件
逻辑复用useRequest
了解到了useRequest是如何实现的~
结语
听完杨老师的这节课,我收获了很多之前没深入了解的知识且对以学的知识有了更深的感悟,感谢老师~
