8 Tips 让你去构建更好的React.js应用在2018年

Posted 2021-05-01 扩展迷EXTFANS

这篇文章是2018年react.js必不可少的技巧和窍门的一个小集合 ，介绍了一些react.js最佳实践，以提高代码的质量. 希望大家都能在这里找到有用的东西～

Tip #1: 请使用 React 16

React 16 在四个月前发布了! 现在大家该开始使用它的时候了. 你可以通过一个简单的版本碰撞迁移来升级,它提供了一些简洁的改进. 我最喜欢的是Fiber 架构 和  支持自定义DOM属性. 从官方 发型说明了解了解你看中的功能并开始使用它们.

Tip #2: 最简法则

聪明的选择你的构建工具,避免过度复杂. Create-react-app 可以在几秒中初始化一个新的项目, serve 可以让你使用一个命令在网上分享它同时 now可以使用一个命令把它部署在互联网上 .

使用你熟悉并且易用的工具. 让项目在开发的进程中不必使引入于复杂的技术.

Tip #3: 学习react.js模式

各种前端库和框架,层出不穷, 但是好的模式不变的. 从 React Patterns 中你最喜欢的例子来帮助你学习常见的模式.

如果任何一个例子引起你的兴趣，你都通过下面的文章中加深你对 高阶组件, 容器和纯展示组件, 受控组件与非受控表单 和 函数作为子组件理解.

Tip #4: 尝试react.js生态系统中的新事物

当你有时间时,不要害怕尝试新的事物. React.js拥有一个领人难以置信的生态系统, 你几乎总能给你的问题找到一个适合的解决方案. 通过运行 awesome-react list 找出吸引你注意的内容. 请务必查看更多的工具，样式和状态管理库，并在缺乏灵感时查看示例项目.

Tip #5: 拥抱平台

用户期望wep应用程序可以通过历史按钮进行导航,可通过分享的URL并将会话保存在网络存储中. 丢失其中的任何一项,用户都会感觉沮丧. 做出额外的努力和浏览器正确的整合在一起.

在你正确理解这些内容的同时, 那就去熟悉新的 Web APIs. 在过去的几年中这些发生了很大的变化. 网页对基础设备的控制越来越强 , 充分利用它！

Tip #6: 离线

针对不稳定的连接进行优化.离线指南 详细的介绍了介绍了Service Workers. 虽然是相当新的技术，但浏览器支持程度正在迎头赶上.

不要担心这一开始很难. Create-react-app create-react-app会给你的app提供离线支持，这是一个不错的开始. 尽管如此，仍然需要准备好用于离线使用的数据. Google Workbox 和Firebase 可以帮助你开始.

Tip #7: 优化慢速设备

用户可能会使用网速非常慢的设备. 不要满足于它在你的 MacBook上的速度, 但是也不太要过于针对性能的优化. 坚持这条法则: 行动之前要考虑好.

通过 Lighthouse来确定一个大致的优化路线,然后使用 webpack dashboard 或者webpack bundler analyzer 看看哪里还能优化代码.

如果你真的需要各方面的提升, 性能还可以通过 代码拼接和动态导入, HTTP/2'的复用和推送功能 和新的 链接预加载 -优化.

最终这不仅是代码量的大小, 还有质量. 通过官方的React.js 优化技巧来提高你的应用程序性能 . 这是一个非常好的列表.

Tip #8: 看看底层

学习react.js背后的概念是值得的花费时间的. 试着在没有 JSX的情况下创建一个虚拟项目来靠近vDom. 通过深化你对vDOM和reconciliation理解, 你可以更有效地优化你的应用程序.

熟悉 context Api及其所有问题. 它为许多流行的库提供了基本支持。 例如 MobX 和 Redux. 最后, 掌握住React.js Fiber.

via  8 Tips to Build Awesome React.js Apps in 2018

更多精选

1

2

3

——End——