React-Redux系列5:代码优化
React 系列 redux 代码优化
2023-09-11 14:19:06 时间
本节主要针对之前的ToDoList代码做下优化
(1)删除无用构造器
(2)解构赋值优化this.props取值
优化如下
注意位置:
解构赋值语法定义的局部变量要写在render内部
(3)无状态UI组件抽离
将当前组件的render内部抽离出来
无状态组件的优点:
1、大大提高了组件渲染性能 2、不用继承Components 3、不用管理状态 4、只是个纯函数/方法
分析: 从这里也可以看出react-redux的好处,即可以将有状态组件逐步拆分为无状态组件。
大型项目里,拆分越细,可服用程度越高。
.
相关文章
- react开发教程(六)React与DOM
- React系列——websocket群聊系统在react的实现
- [React] Use react styled system with styled components
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [Redux] Adding React Router to the Project
- [React] React Router: Router, Route, and Link
- [React Testing] Reusing test boilerplate
- [React] Preventing extra re-rendering with function component by using React.memo and useCallback
- [Recompose] Stream Props to React Children with RxJS
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Native] Passing data when changing routes
- [Reduc] React Counter Example
- React 入门实例教程
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- 001-前端系列-react系列
- React(四)React生命周期、发送网络请求、跨域处理