最新换了新的工作环境， 看公司有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的工作原理：
-
JSX
JavaScript的语法扩展，类似于XML，推荐使用，易于阅读和维护。 -
线程
与原生平台交互时，所有JavaScript操作都在一个线程中完成。
在这条线程上，不仅有React应用程序，还有要处理的所有API调用，所有事件以及所有交互。 - React
-
单向数据流
React和React Native都强调使用单向数据流。整合了从顶层组件到底层组件的单向数据流，使用数据层具有明确的开源，而不是散落在应用程序中，使程序更容易理解。 -
差异化
React采用差异化的思想并将其应用于原生组件。UI以声明方式渲染，React利用差异化来发送必要的更改。 -
组件思维
React的组件是用户界面的最小元素，与外界的所有交互都通过state和props进行传递。
假如父节点的数据通过props传递到子节点，如果相对父节点传递的props值改变了，那么其所有的子节点都会重新进行渲染。
state和props
state(状态)：创建组件时声明组件状态，在组件中更新状态，使用setState()函数。
props(属性)：创建组件时，属性作为参数被传递，属性在组件中无法更新。
状态state是组件所管理的值的集合。创建组件时，state的初始化有两种方式：
- 使用属性初始化设定项进行设置
- 使用构造函数进行设置
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()：组件将要开始销毁
入门篇就先总结到这里，感兴趣的一起来学习吖。
网友评论