React Native - 入门篇：React简介、React Native简介、工作原理和生命周期

最新换了新的工作环境， 看公司有RN项目，同时也被告知后期也需要去写RN项目。

所以， 仗着自己有那么点JavaScript的基础，写过些vue，就提前学习一下React Native, 不至于真到要开始写的时候啥都不会。

话不多说，新手入门，总结输出下这几天学习的知识点。

---

React介绍

React框架最早孵化为Facebook内部，2013年5月，Facebook宣布React框架开源。

React框架底层的核心是Virtual DOM，也就是虚拟DOM。

DOM(Document Object Model，文档对象模型)，在HTML网页上，将 构成页面的 对象元素 组织在一个树形结构中，用来表示页面中对象的标准模型就是DOM

React在框架底层设计了一个虚拟DOM，此虚拟DOM 与页面上的真实DOM相互映射。当业务逻辑修改了React组件中的state/props部分，React框架底层的diff算法会通过比较虚拟DOM 与真实DOM 的差，找出被修改部分，并更新差异部分(即通过调用diff算法计算出变动后的JSON映射文件，最终由Native层将此JSON文件映射渲染到原生App页面元素上)。

React并不会在state更改的第一时间就去执行diff算法，并立即更新页面DOM，而是将多次操作汇聚成一次批量操作，又大大提升了页面更新重回的效率。

React Native介绍

React Native 是一个框架，是一个在JavaScript中使用React JavaScript库构建移动应用App的框架。

React Native框架是在React框架的基础上， 底层通过对iOS/Android原生代码的封装调用， 结合JavaScript代码，实现跨平台的开发。

React Native的工作原理：

1. JSX
   JavaScript的语法扩展，类似于XML，推荐使用，易于阅读和维护。
2. 线程
   与原生平台交互时，所有JavaScript操作都在一个线程中完成。
   在这条线程上，不仅有React应用程序，还有要处理的所有API调用，所有事件以及所有交互。
3. React
4. 单向数据流
   React和React Native都强调使用单向数据流。整合了从顶层组件到底层组件的单向数据流，使用数据层具有明确的开源，而不是散落在应用程序中，使程序更容易理解。
5. 差异化
   React采用差异化的思想并将其应用于原生组件。UI以声明方式渲染，React利用差异化来发送必要的更改。
6. 组件思维
   React的组件是用户界面的最小元素，与外界的所有交互都通过state和props进行传递。
   假如父节点的数据通过props传递到子节点，如果相对父节点传递的props值改变了，那么其所有的子节点都会重新进行渲染。

state和props

state(状态)：创建组件时声明组件状态，在组件中更新状态，使用setState()函数。
props(属性)：创建组件时，属性作为参数被传递，属性在组件中无法更新。

状态state是组件所管理的值的集合。创建组件时，state的初始化有两种方式：

1. 使用属性初始化设定项进行设置
2. 使用构造函数进行设置

constructor(){
    super()
    this.state = {
       name ： “React Native”
    }
}

状态更新：
通过调用this.setState(对象)，传入一个对象，来对已有的state进行更新。
setState()会触发render()方法，但不会触发组件的重新渲染。强制更新组件渲染使用forceUpdate()方法。

属性props是从父组件传递下来的值或属性。在声明时可以是静态值或者动态值。

属性和状态的区别：

属性props	状态state
外部数据	内部数据
不可变	可变
从父组件继承	组件内部创建
可以由父组件更改	只能在组件中更改
可以作为属性传递下去	可以作为属性传递下去
在组件内部无法更改	在组件内部可以更改

React Native工作原理

在React框架中， JSX源码通过React框架最终渲染到了浏览器的真实DOM中，而在React Native框架中，JSX源码通过React Native框架编译后，通过对应平台的Bridge实现了与原生框架的通信。

React Native与原生平台的通信

React Native生命周期

React Native生命周期

• 初始化阶段
  此阶段一般是初始化组件的props和state的默认值

• 加载阶段
  此阶段为组件开始实例化
  componentWillMount()：组件将要开始加载
  render()：组件开始根据props和state进行渲染， 一定返回一个子组件/null/false
  componentDidMount()：组件加载完毕后

• 更新阶段
  componentWillReceiveProps(nextProps)：组件接收到新的props
  shouldComponentUpdate(nextProps, nextState)：逻辑控制是否需要更新组件，默认为yes，可根据业务逻辑需要不进行更新
  componentWillUpdate(nextProps, nextState)：组件即将更新重新渲染， 只有允许更新，才会继续调用此方法
  componentDidUpdate(prevProps, prevState)：组件完成渲染后，返回的参数是更新前的props和state，可与更新后的进行对比处理

• 销毁阶段
  componentWillUnmount()：组件将要开始销毁

---

入门篇就先总结到这里，感兴趣的一起来学习吖。