理解 JSX

JSX 简介

JSX 的介绍参考 React 官方文档 JSX 简介。

JSX 编译后会转为名为 React.createElement 的函数调用。

React.createElement 函数签名

1
function createElement(type: any, props?: any, ...children: ReactNode[])

createElement 函数接收三个参数。

第一个参数为节点类型 type。比如，若在 JSX 中是 div，则 type 为 “div” 字符串；若在 JSX 中是自定义函数组件 CustomComponent，则 type 为 CustomComponent 函数。

第二个参数为节点属性 props。比如，若 JSX 中声明 <div className="wrap">，则 props 为 { className: "wrap" }；若 JSX 中声明 <div>，则 props 为 null。

第三个参数为不定参数，每个参数值对应一个当前节点的子节点。

Read More

加密通信

OSI 模型

OSI将计算机网络体系结构划分为以下七层，标有1～7，第1层在底部。

第7层 应用层

应用层（Application Layer）提供为应用软件而设计的接口，以设置与另一应用软件之间的通信。例如：HTTP、HTTPS、FTP、Telnet、SSH、SMTP、POP3等。

第6层 表现层

表现层（Presentation Layer）把数据转换为能与接收者的系统格式兼容并适合传输的格式。

Read More

2022年国庆回家

今年国庆提前请了两天假回老家，儿子终于实现了他的坐着高铁去旅行的梦想。

儿子的行程

儿子现在三岁半，越来越可爱，与亲戚朋友聚会时，无论什么时候都是焦点。这个国庆节他的行程最忙，先是坐高铁到盐城，第二天又被爷爷开车接到扬州，三天后爷爷又开车送回盐城，5号随我们坐高铁回到上海。在盐城和扬州还随着爷爷奶奶外公外婆到处走亲访友。

儿子正处于快速学习说话的阶段，大人不经意说过的话也能记住，然后不知道在什么时候说出来，让我们惊叹不已。不过大人说的一些不好的话，他也会学着说，着实让人苦恼。

Read More

高效篮球实战经验

下面这些点是我在野球场的实战经验：

  1. 投篮时手臂夹紧，保持持球手的小臂、大臂形成的平面与地面垂直。这样投篮时，手臂能提供更多的力量，更好的控制球出手的力度和角度。

  2. 中投是最好的武器，当出现合适位置时要果断出手，不要有多余的运球和突破。（前提要多练习，提高中投命中率）

  3. 突破时用速度来突破防守，特别是第一步的速度。

字体

CSS @font-face

一个字体家族可能包含多个字型。

比如下图 Garamond 字体。第一个是正常的字型。第二个是将正常字型倾斜一定的角度，变成斜体字。第三个是真正的由字体设计师设计的 Garamond 斜体。

1 2 3

Read More

将 "Vue" 转译为 React

本文记录了如何将 Vue 语言转译为 React 语言。主要目的是，当你面对此类源代码分析工作时，能够找到一些结构化处理的思路。

背景

标题中的 Vue 加上了引号，因为要转译的 Vue 代码不是包含了所有 Vue 语言特性的代码，而是 Vue 的一个子集。Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述 这篇文章介绍了支付宝中使用的动态化框架，“对于Cube卡片，支持基于精简vue的card-dsl。”

Cube 卡片是一种客户端技术，进行 Cube 卡片研发需要进行繁琐的开发环境配置，将 Vue 转译为 React 能够在浏览器中实时预览，提升研发效率。将精简的 Vue 语法转译为标准的 Vue 语法也能实现浏览器预览，但公司里的 H5 项目均采用 React 开发，转译为 React 能够在 H5 项目中复用已有的 Cube 卡片。

暂将这个工具命名为 CubeTrans。

Read More