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

36次阅读

共计 1888 个字符,预计需要花费 5 分钟才能阅读完成。

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 正式发布一个半月以后,我们将进行简单的回顾。

简述
Hooks API
官方文档
React Hooks 简述
对 React Hooks 要解决的问题、使用方式、带来的好处做了简要介绍
议 Function Component 与 Hooks
简述了 Function Component + Hooks 怎样替代掉 Class Component
Function Component 和 Class Component 的区别
通过具体需求的例子,描述了 Function Component 和 Class Component 开发过程中主要的心智模型区别

实践
useHooks
React Hooks 实践集锦站点,收集了很多易懂的 React Hooks 实现方式
怎么用 React Hooks 造轮子
对 React Hooks 的社区轮子进行了有效的分类,包括 DOM 副作用、动画、请求、表单、生命周期模拟、数据存储和原有库封装

如何实现 useInterval
React Hooks 的闭包陷阱

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

进阶
React Hooks 为何依赖调用顺序
本文从与 React Hooks 相抗的多个提案中抽取了 8 个主要问题,并进行了详尽的解释
useEffect 完全指引
本文主要解释了 useEffect 的所有表现的内在原因,而在这个表现下我们如何利用第二参——React 无法 diff 两次 useEffect 的函数上下文,它的第二参数用于比对依赖的场景。
useCallback 相关细节
简述了 useCallback 的适用场景和局限性
为何 React Redux 还没有支持 React Hooks?
本文主要解释了 React Redux 之前基于 Context 的 API 如何导致了性能问题,而这个性能问题如何阻碍了 React Redux Hooks 的出现的

编辑:承虎 & 审阅:一丝 & 霍雍 & 专题供稿:承虎题图来源:https://hackernoon.com/react-hooks-usestate-using-the-state-hook-89ec55b84f8c

正文完
 0