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

时间:2021-7-21 作者:qvyue

最新换了新的工作环境, 看公司有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简介、React Native简介、工作原理和生命周期
React Native与原生平台的通信

React Native生命周期

React Native - 入门篇:React简介、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():组件将要开始销毁


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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。