博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端周刊第53期:React 社区的撕逼
阅读量:7082 次
发布时间:2019-06-28

本文共 2380 字,大约阅读时间需要 7 分钟。

共 1947 字,读完需 4 分钟。本期有篇深度文章介绍 MobX,MobX 的原作者在 Medium 上有,写了至少 5 篇长文介绍自己的 React + MobX 心路。此外,已经闭幕,干货非常多,但需要你花较多时间去消化它的。以下是本周精选内容,请享用。React 社区的撕逼接下来就是。

技术动态

撕逼的事情在国内外都时有发生,本周 Medium 上有篇题为的文章痛批 React,大意为:React 上手太困难,React Native 的 Issue 太多且没人处理,React 及周边工具版本迭代不向前兼容等问题。随后 React 官方维护者 Dan Abramov ,澄清了很多外界对 React 的误解。真理越辩越明,仔细看看两篇文章,相信你能收获不少。

文章教程

React + Mobx 的组合和 Vue.js 在架构上基本是相同的,这篇文章对这两种技术做了比较细节的对比,还有具体的代码,后来附加上了 Preact 这个轻量级的替代。到底哪个好?没有最好的,只有合适的,只有知道各种技术的优缺点你才会做出更合理的选择。

有句经典:好的代码自身就是文档。在代码中添加注释有哪些禁忌,有哪些建议,掘金翻译计划已经为你准备好了。当然,如果想写出一手漂亮的代码,还是建议去阅读更有体系的[彩蛋],这本书也有中译本,但我强烈建议看英文。

大多数同学认为 MobX 是为 React 定制的状态管理工具,这点不可否认,实际上它出现的比 Redux 晚,看到了 Redux 用在实际项目中会带来的问题,对现代前端应用中的 State、View 采用分治策略来击破,让开发者充分体会到响应式编程的好处。这个讲稿是 MobX 作者在 大会上的分享底稿,里面有 4 页能让你掌握 MobX 的思维模型。

开发工具

写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB 开发里面推崇的 CSS、JS、HTML 关注点分离不建议把 CSS 写到 JS 里面,随着开发方式的演化,这种写法总会让人觉得很别扭,因为从概念上来讲组件要具有封装、自治的特点,那么把 CSS 写到组件里面会更容易维护,也能把 JS 的功能发挥到极致,styled-components 就是这样一个库,让你很容的用 CSS 创建比较纯粹的样式组件,一旦你用上它,肯定会爱不释手,我就是这种感觉。

很多同学可能用过 npm 里面的 pre-commit 或者类似 husky 的工具来实现代码提交之前的编码风格检查,可有没有这样的痛点:你改了文件 A,但是代码检查工具提示你文件 B、C、D 里面都有不合规的地方,甚至问题还非常多,真是让人沮丧。lint-staged 能帮你只检查要提交的代码,而不是全量检查。

想使用 TypeScript 但是嫌工作流工具的拼凑过程太麻烦?可以试试这个 Yeoman Generator,能够让你快速开始使用 TypeScript 编写 Node.js 的包,实际上给浏览器编写也是可以的,生成的代码就包含了各种构建、测试的脚本,甚至还提供了 Visual Studio Code 的任务配置。

基于 Star History 你可以查询任何仓库 Star 数量的变化趋势,有点类似于 Google Trends,但是基于 GitHub 官方 API 提供的精准数据。在你做技术选型、调研的时候可能会比较有用。

请仔细思考这句话:测试只能让你发现 Bug 确实存在,但是不能帮你证明没有 Bug。通常来说,我们的测试只会测试最常见的情形,这样的话覆盖度自然就不是最高,而 TestCheck 能够帮你在测试的时候生成一些随机的输入,助你更早的发现潜在的问题。

找找灵感

这篇推文列出了三个搜罗 PWA 应用实例的站点,如果你在学习、研发 PWA,没有什么比生产环境的项目更具有研究价值了,可能都需要翻墙,自备梯子。

justjavac 的知乎 Live:前端工程师入门和进阶,有知友整理出来了学习笔记,里面干货非常多,推荐给在前端路上狂奔的所有同学。

视频教程

React Amsterdam 也是质量非常不错的 React 技术交流会,整体内容分为 React 和 React Native 两条主线,少数几个分享者还就相同主题在 React Conf 2017 上做了分享,大会在 Youtube 上有直播,自己去搜索就好,建议先仔细看看分享日程,然后在视频中选择性观看。

应该是不多的中文的 React Native 实战经验分享,介绍使用 React Native 的好处,使用的现状,踩到了什么坑,最后这部分是参考价值最大的,并且也是篇幅最大的,在使用或者学习 React Native 的同学建议看看。

精彩问答

ES7 中的 Decorator 特性能让你少些很多重复的代码,写 React 的同学可能经常会碰到需要 bind 上下文的情形,这是用 Decorator 的绝佳场景,关于 Decorator,Google 的工程师 Andy Osmani 有篇经典文章。这篇文章给出了在 React Native 项目中启用 Decorator 的方法。

知乎上的一个问题,列举了不少使用比较多的库,不过个人觉得,最应该参考的是 npmjs.com 上被依赖最多的 package 列表,这个列表是全自动动态更新的,去哪里看?。

One More Thing

本文作者王仕军,商业转载请联系作者获得授权,非商业转载请注明出处。如果你觉得本文对你有帮助,请点赞!如果对文中的内容有任何疑问,欢迎留言讨论。想知道我接下来会写些什么?欢迎订阅我的或:《前端周刊:让你在前端领域跟上时代的脚步》。

Happy Hacking

你可能感兴趣的文章
C# Socket编程笔记(自己看,转载)
查看>>
UML建模工具Visual Paradigm(VP-UML)使用教程:安装详解
查看>>
zabbix -- 自定义key
查看>>
ubuntu下 wine如何解决 rtx乱码问题
查看>>
第5章分布式系统模式 Singleton
查看>>
清明节回安徽扫墓的行程和时间
查看>>
解决centos4不能使用yum的方法
查看>>
祝福51CTO学院成立2周年
查看>>
免费ip共享库
查看>>
GMT时间转换
查看>>
项目中UX设计1到2的设计提升总结
查看>>
JS(JavaScript)的初了解5(更新中···)
查看>>
Hadoop Yarn源码 - day1
查看>>
导出csv用excel打开后数字不用科学计数法显示(0123456显示123456)
查看>>
ssm框架,出现xxx不能加载,或者bean不能加载时的解决方案之一
查看>>
MacFree ePlicy Orchestrator
查看>>
springmvc+mybatis多数据源配置,AOP注解动态切换数据源
查看>>
Centos 6.8 系统下安装RabbitMQ方法
查看>>
SQL Server不能启动
查看>>
进程和线程<二>
查看>>