我不再使用 React.setState 的 3 个理由

Michel Weststrate

CloudBoost

Michel Weststrate published in CloudBoost · Jun 15, 2016

自几个月前,我已在所有我新写的 React 组件弃用 React 的 setState 。别误会我,我没有弃用本地组件状态,我只是不再用 React 去管理它,并且令人愉快!

使用 setState 对初学者来说很棘手。即使经验丰富的 React 程序员在使用 React 自有状态机制时,也很容易引入微妙的 bug,例如:

忘记 React 状态是异步的而引入了 bug,日志输出总是在后面一项。

这篇优秀的 React 文档总结了错误使用 setState 的各种情况:


水歌的开源实验

2020 中国开源年会」官网开发及成都站总结

官网开发 —— 骑马造车

展厅需求与日程难题

COSCon’20 筹备伊始,组委会分派给我的首要任务是合作伙伴云展厅的开发,以便在疫情尚未平息之时的线上大会给各大合作伙伴一个集中宣传的窗口。

但云展厅的设计图并非一般线下大会在官网贴一屏 logo 那么简单,还有文字简介宣传视频加群二维码入选的议题与讲师等等。面对这样的需求,必然难以用近年技术站流行的 MarkDown 网站生成器来规范而高效地实现,因为去年用 YAML 文件维护前两年的 logo 墙已经很繁琐了。

提到合作伙伴关联的议题、讲师,又让我想起参加 COSCon 2018、2019 时手拿一张尺寸巨大、文字特小的日程表找会场时的痛苦,与参加台湾 COSCUP 2019 手持会议 App 畅游时的体验形成鲜明对比。

OPass logo - 台湾开源会议通用 App

与我一同经历上述 3 场大会的庄表伟老师(开源社 2020 年度理事长),在 COSCon’19 现场曾和我不约而同地提出“要做个开源会议系统”,大会结束后便以产品配开发的搭档火速开干,但又因团队缺乏精力而停摆……


星星之火,可以燎原

大家好,我是牛牛,我来自 FCC 成都社区

如果你问我为什么要在开篇自我介绍,因为我对 FCC 以及 FCC 的每一个人感到骄傲和自豪!

💫 故事从这里开始

10 月 24 号在这个对计算机行业来说很特殊的日子,FCC 成都社区承办了 2020 年中国开源年会成都分会场。大会主题是开源向善,开源一词看似是程序员专属,可成都分会场的志愿者大部分却不是计算机专业,有森林保护专业、国际贸易专业、外语专业等。当我问她们为什么会来时,她们答道“看到了,就想来了解一下”。

或许有时就是不经意间听到的某个观点或某句话,就会在自己心中种下了一颗种子,一颗永远不会枯死的种子。


GitHub 在线 IDE 初体验

之前就有听说 GitHub 将推出在线 IDE,一搜索发现很多结果。

现在 GitHub 的在线 IDE 发布一段时间了,官方命名为:GitHub Codespaces(点击可以申请),今天我们就来体验一下。


【公益】高考志愿填报助手

2020 年高考是一场非常不容易的高考,毕业生和社会各界都历经艰辛,希望我们的拼搏都能有更加美好的明天。

说起填志愿,回想起我高考时正值汶川大地震。那时我们获取可靠、有效、全面的志愿参考信息,基本只能通过学校发的一本大部头参考书,里面汇集了全国招生的院校、专业和往年录取数据。但这样一本像过去每个城市的电话黄页一样的书,反复查阅它的“低效”痛苦就不用多说了。

进入大学 IT 技术社团之后,就一直想用自己学到的编程技术,来为学弟学妹解决我当年那般的痛苦。但彼时,我国政府部门信息公开政策的保守和技术的落后,让我们很难获得好用的数据,商业平台又有巨大的封闭壁垒,遂作罢……

直到前一阵子,FCC 一位城市社区组织者在群里分享了黄希彤老师的填教授公益项目,看到他把多年收集的公开数据用统计学方法进一步处理,免费为广大考生做参考,内心十分激动!于是想尽自己现在的专长所能,帮黄老师优化一下前端界面,让广大的考生和家长用起来更方便。


GraphQL + Koa + React 项目实践

项目背景

源于 2019 年 11 月 16 日 FCC 成都社区主办的 Web 全栈大会上尹吉峰老师的 GraphQL 的分享,让我产生了浓厚的兴趣。GraphQL 是一个用于 API 的查询语言,是使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。一个 GraphQL 服务是通过定义类型和类型上的字段来创建的,然后给每个类型上的每个字段提供解析函数。

参考学习资料:

基于以上的一番学习,做了个实践的小项目,就代码做以下分析。

(附上项目地址:react-graphql-project


JavaScript 效率工具

每当看到发在 FCC 成都社区群里的技术文章,水歌都忍不住去指出它的不足。

今天评注的文章题为《一批提升你工作效率的 JS 工具方法》,文中的 60 个方法与上次评注的“24 个 ES 方法”类似,不够简洁优雅,与最新 ECMAScript、DOM 标准有些差距,有些“复制粘贴老文章片段”的感觉。

接下来,我就按功能类别来对一些有必要优化的工具方法一一重构。


【青铜三人行】每周一题之验证栈序列

先说一个消息,为了方便互相交流学习,青铜三人行建了个微信群,感兴趣的伙伴可以扫码加下面的小助手抱你入群哦!

青铜三人行小助手(其实是 Helen)

每周一题,代码无敌~ 这次的主题是 「贪心算法」


【青铜三人行】外篇之循环与递归

不知不觉青铜三人行已经做了两个月的题了,这次轻松点,看看不一样的吧。

机器擅长的事 —— 重复

作为专业的程序猿,经常被行业外的朋友问到,为什么要学习编程?其实,除了掌握技能提高工作效率、甚至成为职业以外。学习编程更重要的是:思维训练

其实,计算机从一开始就是为了帮助人们解决复杂问题而设计出来的。而在这个过程中,计算机程序的「思考」模型是一个叫“图灵机”的计算模型,图灵机是图灵 (Alan Mathison Turing) 祖师爷模拟人思考而发明出来的。为什么图灵祖师爷要发明图灵机呢?是因为他想要试图以自己和自己周围的天才科学家的思维方式作为人类的具体实例,来抽象总结出一套解决问题的办法。所以说,计算机程序的运作方式其实是一种人类尝试用简单的方式逐步去解决复杂问题的天才的思考方式。


webpack 打包文件分析(下)

回顾

上一篇webpack 打包文件分析(上)我们讲到 webpack 打包源码中文件加载的部分,通过分析了解了在 webpack 中不同模块规范相互加载的处理。而至此,只包括了文件的同步加载分析,对于文件的异步加载又是如何处理的呢?

我们使用 webpack 将项目打包为一个 bundle.js 文件,通过 script 标签插入到页面中引用。但如果这个 bundle.js 体积特别大,就会导致我们加载时间过长,阻塞页面的渲染。

其次,这个打包出来的 bundle.js 中其实部分的代码资源是当前加载页面用不到的,这样也导致了浪费。于是,资源加载的优化就成了必须要考虑的问题,而异步加载(或者说动态加载)就是解决这个问题的方案之一。


Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×