小黑屋

0%

第1章：React 与 React Native 简介

发表于 分类于

React简介

React 只专注于 MVC 框架设计模式中的 View 层面的实现。为了大大减少传统前端直接操作DOM 的昂贵花费，React 使用Virtual DOM （虚拟DOM）进行DOM的更新，实现了单向数据流传递。下图清晰地描述了 React 底层与前端浏览器的沟通机制。

Ract框架结构

React的底层特性

传统HTML页面需要更新页面元素时，都是将整个页面重新加载实现重绘，这个代价非常昂贵。后来有了 AJAX 这样的局部更新技术，实现了页面的异步更新，不过AJAX代码编写、维护、性能及更新粒度上还是不够完美。

文档对象模型(Document Object Model， DOM) 是 W3C 组织推荐的处理可扩展标志语言的标准编程接口，在 HTML 网页上，将构成页面的对象元素组织在一个树形的结构中，用来表示文档中对象的标准模型就称为 DOM。

React 在底层设计了虚拟DOM，虚拟DOM 与真实 DOM 相互映射，当业务逻辑修改了 Reat 组件中的 state ，React 框架diff算法会通过比较虚拟 DOM 与 真实DOM 之间的差异，找出哪些部分被修改了，最终只更新差异部分。这样实现了React 在前端中的高性能表现。

其实，React 并不会在state 更改的第一时间去执行 diff 算法并立即更新页面，而是将多次操作汇聚成一次批量操作，这样再次提升页面更新重绘的效率。

React Native 简介

第3章：React Native 工作原理与生命周期

React Native框架及工作原理

因为 React Native 底层为React 框架，所以，如果是UI层的变更，那么就映射为虚拟DOM后，调用diff算法计算出变动后的 JSON 映射文件，最终由Native 层将此 JSON 文件映射渲染到原生App的页面元素上，实现了在项目中只需要控制state 以及 props的变更来引起 ios /Android 平台的 UI 变更。

编写的 RN 代码最终会打包成 main.bundle.js 文件供App 加载，此文件可以存在App本地或者服务器上更新。

RN 与原生平台通信

RN 与原生的通信如下图所示，采用了 JavaScriptCore 作为 JS VM，中间通过 JSON 文件与 Bridge 进行通信。若使用 Chrome 进行调试，那么所有的 JavaScript 代码都将运行在 Chrome 的 V8 引擎，与原生代码通过 WebSocket 进行通信。

RN与原生平台通信

组件间通信

  1. 父子组件之间的通信

    在RN中，可以通过 props 的形式实现父组件向子组件传递值，如下例子展示父组件通过调用子组件并赋值子组件的 name 为 React，子组件通过 this.props.name 获取父组件传递过来的 name 字符串 React：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /**
    *父子组件通信，在父组件中调用子组件
    */
    <ChildComponent name='React'/>

    /**
    *子组件实现，通过props获取父组件传递的值
    */
    class ChildComponent extentds Component {
      render(){
        return (
            <Text> Hello {this.props.name}!</Text>
        );
      }
    }

  1. 子父组件通信

    先略了

React Native 中的生命周期

在 RN 程序启动时，内部的虚拟 DOM 开始建立，生命周期时建立在此虚拟DOM 的整个声明周期之中，从虚拟DOM 的初始化到虚拟DOM 的卸载 ，RN 为组件的不同状态建立了不同的生命周期。

谢谢你的鼓励