学习React概念

[baixiaoji]

这是什么东西？（明白该想project的定义）

为什么要做这个东西？（想想做这个东西的动机）

如何做这个东西？（拆解细节）

回顾（项目过程中的执行、以及心态的变化）

[baixiaoji]

受控组件 vs 非受控组件

• 非受控组件：自身的状态一直都由DOM持有，若想要获取当前状态值，需要通过DOM的方式
• 受控组件：状态由组件持有，通过监听Change事件，进行重新更新状态，进而触发React更新（不会出现数据同步异常问题）<input value={someValue} onChange={someOnChange} />

相关阅读：

1. https://gist.github.com/markerikson/d71cfc81687f11609d2559e8daee10cc
2. https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

[baixiaoji]

RN

RN原理浅析

diff React

React（JS） 说到底都是有 JS Engine 执行的脚本。但是RN，RN的native code 驱动JS Engine，JS Engine 解析执行 React（DSL） 的 JS代码，然后把计算好的解决返给 Native code，Natvie code 根据结果驱动所有能够驱动的硬件。

RN 利用 React 的 Virtual Dom 和数据驱动编程概念，简化原生应用的开发，同时，他不由浏览器去绘制，只是计算出绘制指令，最终的绘制行为由原生控件复杂，保证了原生的用户体验。

Bridge 重要性

深入 Bridge 前面有提到, RN厉害在于它能打通JS和Native Code, 让JS能够调用丰富的原生接口,充分发挥硬件的能力, 实现非常复杂的效果,同时能保证效率和跨平台性。

• Bridge 给RN 中的 JS Engine提供原生接口。
• 每一个支持RN的原生功能必须同时有一个原生模块和一个JS模块，JS模块是原生模块的封装，方便Javascript调用其接口。Bridge会负责管理原生模块和对应JS模块之间的沟通, 通过Bridge, JS代码能够驱动所有原生接口，实现各种原生酷炫的效果。
• RN中JS和Native分隔非常清晰，JS不会直接引用Native层的对象实例，Native也不会直接引用JS层的对象实例(所有Native和JS互调都是通过Bridge层几个最基础的方法衔接的)。

Bridge 原生代码负责管理原生模块并生成对应的JS模块信息供JS代码调用。 每个功能JS层的封装主要是针对ReactJS做适配，让原生模块的功能能够更加容易被用ReactJS调用。 MessageQueue.js 是Bridge在JS层的代理，所有JS2N和N2JS的调用都会经过MessageQueue.js来转发。 JS和Native之间不存在任何指针传递，所有参数都是字符串传递。 所有的instance都会被在JS和Native两边分别编号，然后做一个映射, 然后那个数字/字符串编号会做为一个查找依据来定位跨界对象。

[baixiaoji]

• JSCore 硬盒JSCore讲解。
• 官方线程讲解
• StepByStep原理讲解
• RN性能优化
• how overcoming the sinle thread
• 移动端跨平台开发的深度解析

[baixiaoji]

JavaScript Core

JavaScript Core

What

是JS引擎，专门涉及来解释和执行JS代码。早先是从 KJS & PCRE 正则表达式的基础上开发，基于抽象语法树的解释器。 同类型的JS引擎有 Google V8 和 Mozilla SpiderMonkey。 PS：JSCore 能够在Objective-C中执行JS代码，也可以在JS环境中插入自定义对象。这也是为啥RN中IOS部分会用这个引擎。