本文基于官方 v18.1.0 文档。
They let you use state and other React features without writing a class.
It’s hard to reuse stateful logic between components
现在可以通过自定义 Hook 提取封装带状态的逻辑。
Complex components become hard to understand
useEffect可以把复杂逻辑分拆到多个小的函数中。
本文基于官方 v18.1.0 文档。
You need to keep an eye on the code you are including in your bundle so that you don’t accidentally make it so large that your app takes a long time to load.
Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.
Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app.
本文基于官方 v18.1.0 文档。
React embraces the fact that rendering logic is inherently coupled with other UI logic:
how events are handled, how the state changes over time, and how the data is prepared for display.
Instead of artificially separating technologies by putting markup and logic in separate files,
React separates concerns with loosely coupled units called “components” that contain both.
这是当初 React 最吸引我的地方，不执著于将 UI 和逻辑分开。MVC 大行其道几十年后，Android 跟 iOS 也都在尝试返濮了。
在我实际工作经验中，进行视图子类化定制的出发点往往就是为了将 UI 和其逻辑写在一起。这个需求越靠近业务层就越强烈。
之前 通过直接运行 babel 相关命令，把 jsx 语法做了预处理。但输出远远达不到 create-react-app 的水平。 Google 了一圈发现，原来可以通过 webpack 把 jsx 预处理、js 压缩、js 打包几个步骤一次性执行。
安装 webpack：
1 | npm i webpack webpack-cli |
1 | npm init -y |
把 html 文件放在 src 目录下，js 文件放在 src/js 目录下。html 中引入对应的 js：
1 | <script src="/js/index.js"></script> |
不要加 type=”text/babel”，路径其实对应的是预处理后的、被转换的 js 文件。
Html5 的 <video /> 只能在整个视频文件加载完成后才能播放，体验极其不好。如果仅是支持基于 Http(s) 的流媒体播放的话，可以直接利用 Http 协议的 Content-Range 头。
所以本文的核心思想是使 Sanic 后端能正确处理 Videojs 发送的 byte-range 请求，并回以带 Content-Range 的文件流响应即可。
手里有闲置的 Surface 3 平板、Android 平板、Android 手机各一台，正好可以把它们分散固定在常驻区域的墙面上，一可以用作多媒体终端（这个功能是现成的），二就是可以用作智能家居的控制终端，和我的树莓派（中控系统）进行双工通信。
这是我设想的语音助手外的另一个重要的控制路径。比如，你已经在终端附近时，或超出拾音范围时，或者你恰巧在一直嗡嗡响的洗衣机周边时，通过屏幕终端下发命令应该是更优解。
3 个固定的终端大概是分别放在厨房、客厅、阳台。树莓派作为服务端，允许多个客户端的接入，推送设备状态信息到所有终端。最终的网络连接很可能不是图里这种 all to all 的结果，因为我很可能有两段路由。
终端的软件实现，大致确定以 web 页面形式实现，否则分别开发原生应用的代价太大了。前端框架用 React，小巧、组件化实现，上手简单；搭配 Spectre CSS 库，开发一个看起来差不多的 UI 应该是够了。
网络传输自然是 Websocket 了，树莓派是服务端，各个终端是客户端。因为是局域网传输，数据量也不大，所以应该直接传输 json 数据。具体的数据模型待定，跟最后选定的家电的能力强关联，现在写得太细也没什么意义。