Reach入门 02

重新整理

什么是Reach

将数据渲染 为 HTML视图 的 开源 JavaScript的库。

Reach发展史

为什么学Reach

原生JS操作DOM繁琐，效率低（DOM-API 操作UI）。
使用JS直接操作DOM，浏览器会大量的重绘重排。
原生JS没有组件化，代码复用率低。

页面三驾马车：
html 壳子
css 衣服
js 交互

Reach特点

组件化模式，声明式编码，提高开发效率和组件复用率。
react native中，可以使用react语法进行移动端开发。
前端人员通过react native，通过js编写安卓和ios应用。
通常 安卓 使用java 开发安卓； 使用 swift 开发ios。
使用 虚拟DOM+优秀Diffing算法，尽量减少和真实DOM交互。
虚拟DOM：不是真实DOM，是Reach操作的一个DOM，专门给Reach使用。

什么是DOM

用户 点击页面（通过浏览器）
客户端（浏览器） 向 服务器 发送http请求（http请求通过DNS解析服务器ip）

TCP协议三次握手

服务器 将接受到的代码 发送给 浏览器
浏览器 解析代码
经过 三大步骤： DOM构造；布局；绘制页面

最后变为网页

DOM构造
浏览器将收到 的 html代码 通过html解析器 解析构造为 一颗 DOM树。

DOM树上每一个节点之间关系包括：父子，兄弟

将CSS代码，通过CSS解析器 构建出 样式表规则

将构造出的规则 分别放到对应的DOM树节点上
生成 带样式节点的 DOM树。

布局：
浏览器 从上到下，从左到右，读取DOM树的节点。
顺序存放到一条传送带，这条传送带conveyor，就是文档流document flow.

节点嵌套：

多重嵌套：

文档排完之后，开始获取计算节点的坐标和大小等CSS属性作为盒子的说明。
最后根据说明将盒子在页面中摆放。

绘制页面
将所有页面绘制出来，完成页面渲染。

行内元素和换行：

form块级元素：

head 和 body元素：

总结文档流和网页的关系：
the document flow and the web page:
一维 映射 二维。

Reach Projects

1.nft 拍卖平台（nft Jam）
平台功能：
发布拍卖东西
nft 展示资产

2.Factory 发布任务平台，领取奖励

3.xBacked

抽奖游戏
棋牌游戏
桌游游戏
猜拳游戏

合约生命周期（One-off/ Ongoing）

合约生命周期 分为 one-off 和 ongoing。

需要从以下两点来去进行考虑：

交互对象
合约生命周期

eg: A和 B 猜拳游戏
A 出拳
B 出拳
A和B猜拳，A和B交互
C和A猜拳，C和A交互
采用one-off 比较合适，只涉及两个对象之间的交互。

当需要有pool，每个对象都需要跟pool进行交互，或者参与进来，需要on-going.
比如 拍卖，质押池等。

FOMO小程序（Reach初体验）

抽奖彩票游戏
发起者规定票价和ddl
其他每个人在ddl钱可以付费买彩票
每当有人买票，ddl重置
ddl到时，最后一个买彩票的人获得所有奖池奖励

项目分析

人员：
发起者-> participant
参与者-> participant class

Data(存储信息)：
发起人: 票价，DDL
参与者: 是否买票

顺序：
1.发起者publish票价 和 ddl

2.当ddl还没到：
参与者可以买票
记录最后一个买家

涉及到循环： parallelReduce 和 file 循环
parallelReduce ： 每次循环中，不同的人 做 不同的事情。
file ： 同样的人 做 同样的游戏（猜拳游戏）。

3.将奖池发送最后一个买家

References

https://www.zhihu.com/question/34219998