React应用程序的基本建议。
用于…的用途
几乎每个图书馆都有一个“克隆”。 您可以找到多个库来解决特定任务。 这意味着当您看到对React Router的引用时，请确保该库有一个“克隆”，但有Preact。
基于组件的库
您可以使用React / Preact / Inferno。 没关系 React是众所周知的并且是规范的。 Preact很小，只能在生产中使用。
但是，这种“速度”在“现实生活”中并不重要。 90％的速度问题是由应用程序（而不是框架）的错误优化引起的。 因此，选择哪种库没有什么区别（ 大小除外 ）。
国家管理
Mobx / Redux / Flux / Kea-没关系。
Promise-middleware允许使用promise作为动作的有效负载。 Redux中最简单的异步解决方案。
样式和样式组件
“样式化的组件”-设计方法。styled-components—用于在React中设计样式化组件的库。
styled-components-肿，需要对CSS方法有很好的理解。 但是它非常强大，并且具有丰富的API 。glamorous-与`styled-components'类似的API，轻巧，性能良好。radium+styled-jsx+glamor也很酷。
“在组件中进行思考，在组件中进行样式化”。
“样式化的组件”有什么问题？
- 有时很难覆盖您已经在使用的CSS框架。
- 如果您不熟悉样式化组件，则可能会直接将应用程序逻辑与样式联系起来。 不对
处理styled-components时的一些建议：
- 不要为应用程序中的每个组件都创建样式化的组件。 仅将
styled-components用于可重用/通用组件。 - HOC可以为您节省一些时间。
- 不要混用逻辑道具和UI道具。
工具包和Webpack
选中“ Next.js，Razzle，CRA。 为什么要在下一个项目中使用它们。” 有关更多信息，为什么工具箱更好。
不要从头开始编写webpack.config！
没有样板，仅工具箱。
- Creact反应的应用程序内 ，Next.js， 包裹 ， 盖茨比。
- 服务器（如果有）和客户端都必须具有HMR。
“ Awesome-toolkits”列表 。
您可能错过的Webpack插件：
circular-dependency-plugin—检测循环依赖autodll-webpack-plugin—仅在没有供应商的情况下重新编译更新的代码write-file-webpack-plugin将文件从内存FS写入真实FS。assets-webpack-plugin—从编译器获取webpack统计信息
用户界面
本文可能会比较不同的UI框架，可以帮助您为下一个项目选择框架。
如果您想要一个快速的UI框架，请选择由CSS-in-JS或inline-css库提供支持的框架。
蚂蚁设计和Material-UI很棒。
静态类型
绝对是TypeScript。
流是完全未优化的，并且缺少许多功能。 MS> FB????
资料夹结构
有很多方法来构建React / Redux项目。 请记住，此结构可能会因您的设置而异。 例如，Next.js和CRA具有一些预定义的文件夹。
“典型结构”
没有推荐的结构。
从任何简单的结构开始，并随手进行改进。
比较一些开源的React / Redux项目，您会发现它们之间存在很大差异。
您可以使用“鸭子”方法。
优点：联轴器松动，代码清晰。缺点：不太干。
组件
组件与PureComponent与“无状态组件”
组件类型之间的差异。
更改组件的类型并不能保证性能的提高。
/组件
除了“原子”方法和其他启发式方法外，没有关于构建/components文件夹的实用建议。
注意：“原子”方法无效！ 大多数“原子”方法只会使事情变得更糟！ 只有您的团队和您才真正知道构建/components的最佳方法 最可靠的方法之一-将所有共享组件存储在/components文件夹中。 对于一个小型/中型项目而言，这就足够了。
您将找到在开发过程中构造/components的最佳方法。 不要开始过早的优化！ PWA
使用离线插件。
ESlint
标准代码样式为❤️。
如果您关心a11y（可访问性），请添加eslint-plugin-jsx-a11y 。
一些默认的StandardJS规则很烦人，例如no-unused-vars和indent。
巴别塔
在生产中添加babel-preset-react-optimize 。
如果您使用styled-components ，请不要忘记添加styled-components插件。
减速器
剖析Twitter的Redux Store 。
在任何应用程序中，所有状态的95％可解释为：
Redux开发的主要关键是：
状态=内存中的DB。
在状态中复制数据是可以的。 [非正规化]
选择器
始终使用选择器！
什么是“选择器”？
如果您的mapStateToProps看起来像：
那么您做错了，因为：
- 每当您计算某些价值的方式发生变化时，您都必须在整个应用程序中进行更改。
- 每次状态结构发生变化时，您都必须在应用程序中修复属性的路径。
- 您将计算（ 选择 ）逻辑连接到容器。
代替：
谢谢阅读！
GitHub ： @Metnew
推特： @vladimir_metnew
From: https://hackernoon.com/strategical-view-part-1-9a1da295a3c1
以上是 React应用程序的基本建议。 的全部内容， 来源链接： utcz.com/z/381206.html
