从个人开源项目思考,之前短暂的工作经历及最近的一条知乎回答,写点最近新学到的 React Hooks 知识。
reactstrap
依赖,也不用其他 UI 库了,尝试自己实现常用组件,比如 <Modal />
组件在了解 React.js 的 Portals
之前,可以先看一下不借助 Portals
的实现:
How To Implement a Modal Component in React | DigitalOcean
React 官方的实现是基于 Class Component 的:
下面是自己写的 React Hooks 版本:
DOM tree 结构应该是这样的:
<html>
<body>
<div id="app-root"></div>
<div id="modal-root"></div>
</body>
</html>
暂不考虑键盘交互和 Accessibility
只要前后端约定好了 API 文档,就可以直接 TDD 了,不用等后端 API 开发好了再测请求
pass data from child component to ancestor.
显然要用 callback,但是这个 cb 竟然是这样传递的:
/**
* child → A → B →C → ancestor
* 中间隔了 3 个组件,关键是这个 cb 只有在 child 里用到了。
* 暂时不考虑组件设计问题
*/
所以才翻到了 React 的这篇 blog: