前端技术周刊 2019-03-25:React Hooks

2,043 阅读3分钟

2019-03-25

前端快爆

  • V8 7.4 发布。此版本支持了 JIT-less 启动模式WebAssembly Threads 以及私有类成员属性语法 #field,并优化了函数形参实参数不匹配、原生访问器读写、流式解析等场景的性能表现。🔗

点评:Chrome 74 将带着 V8 7.4 内核一起正式发布,这么难看的语法已经快要被正式支持了

  • Chrome 74 起,将试验性支持 kv-storage 作为一个标准库。标准库提案旨在提供不用下载即可使用的二方库,而 kv-storage 则旨在为 IndexedDB 提供简单的 kv 读取接口。🔗

点评:标准库提案是一个争议较大的提案,大家是不是觉得 std:jquery 和 std:lodash 更加重要?现在的搞法更像是 BOM 的模块化实现。

  • decorator 提案再次大改,现在版本的 decorator 将提供 4 个基础方法函数 @wrap, @register, @expose@initialize,并支持 decorator 的直接导入导出如 export decorator @logged🔗

点评:不知道依赖 decorator 的那些库睡觉睡得踏实吗

百宝箱

  • React Redux 发布了 7.0.0-beta 版本,在其中实现了 useRedux 接口,并解决了其 v6 版本带来的数据更新遍历 Provider 所有子树节点的性能问题。🔗

点评:为嘛不在 6.0 就提供了 Hooks 版本呢,原因在下面的专题部分有讲

  • iodide 是 mozilla 提供的一个通过书写文档生成可视化网页的系统。🔗

点评:为什么看起来这么像是 markdown 版本的 jsbin

  • Handtrackjs 是一款前端进行实时手势识别的库,基于 Tensorflow.js 并封装了训练数据。🔗

  • React-Router 5 已经发布,Route 支持 array 作为 path 输入值了。🔗

点评:不过还是不支持 hooks

专题:React Hooks

React 一直在寻找更加贴合 UI 开发过程的心智模型,React Hooks 是他们最新的思路。编程方式的巨大变化下,已有的需求需要通过 React Hooks 重新解决。在 React Hooks 正式发布一个半月以后,我们将进行简单的回顾。

简述

官方文档

对 React Hooks 要解决的问题、使用方式、带来的好处做了简要介绍

简述了 Function Component + Hooks 怎样替代掉 Class Component

通过具体需求的例子,描述了 Function Component 和 Class Component 开发过程中主要的心智模型区别

实践

React Hooks 实践集锦站点,收集了很多易懂的 React Hooks 实现方式

对 React Hooks 的社区轮子进行了有效的分类,包括 DOM 副作用、动画、请求、表单、生命周期模拟、数据存储和原有库封装

前文比较了定时器需求中的 useStateuseEffectuseReduceruseRef 的四种实现方式,正好遍历了主要的 React Hooks API。后文讲述了另一个定时器需求,比较了 useEffectuseLayoutEffectuseReducer 三种实现,解释了为何异步的 useEffect 会导致闭包变量读取问题

进阶

本文从与 React Hooks 相抗的多个提案中抽取了 8 个主要问题,并进行了详尽的解释

本文主要解释了 useEffect 的所有表现的内在原因,而在这个表现下我们如何利用第二参——React 无法 diff 两次 useEffect 的函数上下文,它的第二参数用于比对依赖的场景。

简述了 useCallback 的适用场景和局限性

本文主要解释了 React Redux 之前基于 Context 的 API 如何导致了性能问题,而这个性能问题如何阻碍了 React Redux Hooks 的出现的


编辑:承虎 & 审阅:一丝 & 霍雍 & 专题供稿:承虎
题图来源:hackernoon.com/react-hooks…