从个人开源项目思考,之前短暂的工作经历及最近的一条知乎回答,写点最近新学到的 React Hooks 知识。

个人开源项目

去掉 reactstrap 依赖,也不用其他 UI 库了,尝试自己实现常用组件,比如 <Modal /> 组件

在了解 React.js 的 Portals 之前,可以先看一下不借助 Portals 的实现:

How To Implement a Modal Component in React | DigitalOcean

React 官方的实现是基于 Class Component 的:

Portals - React

下面是自己写的 React Hooks 版本:

DOM tree 结构应该是这样的:

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

暂不考虑键盘交互和 Accessibility

暂不考虑键盘交互和 Accessibility

msw 替代实际 API 请求测试,或者 json-server

只要前后端约定好了 API 文档,就可以直接 TDD 了,不用等后端 API 开发好了再测请求

工作中遇到的问题

pass data from child component to ancestor.

显然要用 callback,但是这个 cb 竟然是这样传递的:

/**
 * child → A → B →C → ancestor
 * 中间隔了 3 个组件,关键是这个 cb 只有在 child 里用到了。
 * 暂时不考虑组件设计问题
 */

所以才翻到了 React 的这篇 blog:

Hooks FAQ - React