这是我参与「第五届青训营」伴学笔记创作活动的第11天
谈谈ReactHooks的设计模式
认知基础
忘记生命周期,以Effects的方式开始思考
以事务的角度来思考问问题并编写代码
经过Hooks的改造,只需要一个Effect就完整实现了多个生命周期函数才能完成的业务逻辑,比如监听和取消监听
如果希望进一步的抽象和复用,只需要将Effect的代码抽象定义为自定义Hook,这比生命周期来的简单
常规操作
React.memo VS React.useMemo
- hooks推荐使用useMemo,可以实现更加精细化的操作
常量
- 由于函数组件每次重新渲染的时候都会重新执行,所以常量应该放置到函数外面去避免每次都重新创建,而如果定义的常量是一个函数,且需要使用函数组件内部的变量做计算,那么一定要使用useCallback来缓存函数
useEffect第二个参数
- 在设计上他同样是进行浅比较,如果传入的是引用类型,那么很容易被判定为不相等,所以尽量不要使用引用类型作为判断条件,容易出错
工程实践
外观模式:在组件中通过各个自定义Hook去操作业务逻辑,每个自定义Hook都是一个独立的子模块有属于自己的领域模型
React-Router 的实现原理及工作方式分别是什么？
实现原理
外部:基础原理
切换Hash运用了浏览器Hash,
切换网址运用了HTML5 HistoryApi中的pushState和replaceState
服务端要完成HistoryApiFallback的配置
内部:实践方案
react-router
react-router-dom:基础路由是BrowserHistory,调用histotryApi
react-router-native:基础路由是MemoryHistory
工作方式
整体:设计模式
运用了Monorepo架构一个packages包括多个package
运用了ContextApi完成了数据共享
局部:工作方式
- Context容器,分别是Router与MemoryRouter,主要提供上下文消费容器
- 直接消费者提供路由匹配功能分别是Route,Redirect Switch
- 与平台关联的功能组件分别是react-router-dom中的LinkNavLink及react-native中的DeepLinking
React 中你常用的工具库有哪些？
初始化
运用react-app-rewired对create-react-app提供拓展能力
单个组件项目使用create-react-library
大型组价项目推荐使用storyLibrary
开发
路由:ReactRouter
样式:tailwindicss styledcomponent windicss unocss
展示组件:Antd
功能组件:React-draggable实现拖拽 Video-React用于播放视频 react-pdf-viewer用于预览PDF react-window和react-virtualized用于长列表问题的解决
构建:webpack vite
检查:ESLint代码规范检查,代码编写测试 jest react-testing-library react-hooks-testing-library
发布 : s3-plugin-webpack处理静态资源上传
