标签：生命周期 React state props 组件 import Native

文章目录

• React Native 简介
• React Native 工作原理及生命周期
• • React Native的工作原理
  • React Native 与原生平台的通信
  • React Native 组件间通信
  • • 父子组件间通信
    • 子组件向父组件传递消息
    • 多级组件间通信
    • 无前后关系组件通信
  • React Native 生命周期
  • • 初始化阶段
    • 加载阶段
    • 更新阶段
    • 销毁阶段

React Native 简介

关于React框架，其最早诞生于Facebook内部。当时，由于前端MVC框架性能无法满足Facebook项目的性能需求以及扩展需求，Facebook的员工之一Jordan Walke索性自己着手开发React框架，并于Facebook内部进行使用。2011年用于Facebook的newsfeed；12年用在了Instagram项目中；并在13年于美国的JSConf大会上正式将React.js开源。
后来，Facebook也致力于使用HTML5进行移动端的开发。但HTML5开发的APP只是在H5外部套上了一个外壳后在移动平台运行，性能上远不及原生的App。并且这种差距仍在不断拉大，最终迫使Facebook放弃了HTML5的技术路线，并于2015年3月发布了ReactNative，专注于移动端App的开发。
RN建立在React的基础之上，底层通过对iOS以及Android原生代码的封装与调用，使得开发者可以通过编写javascript代码而得到可调用iOS平台以及Android平台原生代码的App。

React Native 工作原理及生命周期

React Native的工作原理

React Native框架内部提供了非常多的内置组件，包括基本组件如：

• View
• Text
• Image
• …

用于一些功能布局的组件如：

• Button
• Picker
• …

iOS平台与Android平台的API等：

• Alert
• AsyncStorage
• CameraRoll
• …

在React框架中，JSX代码通过React框架构造出虚拟DOM，最终将其渲染至浏览器的真实DOM中。在React Native中，JSX源码通过RN框架编译后，通过对应平台的Bridge实现与原生框架之间的通信，也就是说，当我们在代码中调用RN提供的API，RN就通过对应平台的Bridge调用原生框架的方法。
与React框架类似，当应用的UI层发生变化时，React Native将调用底层的diff算法，通过映射的虚拟DOM计算出修改后的JSON映射文件，再将变动后的JSON文件渲染到原生的App中。因此，在React Native中，我们也只需通过控制state和props的改动来引起iOS平台或Android平台的视图层的改变。

React Native 与原生平台的通信

React Native框架采用JavaScriptCore作为JS虚拟机，通过JSON文件和Bridge进行通信。在使用Chrome浏览器调试时，所有的js代码都将运行在Chrome的V8引擎当中，与原生代码间通过WebSocket进行通信。

React Native 组件间通信

与React框架相同，在React Native中，开发的最基本元素就是组件，当然也将会涉及到组件间的通信。接下来我将简单介绍几种常见的组件间通信情况。

父子组件间通信

如React一样，在RN中，我们也可以通过props向子组件传递数据。
下面象征性地给出一个子组件的定义：

import React, { Component } from 'react';
import { View, Text } from "react-native";

class Child extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		return (
			<View>
				<Text>{ this.props.text }</Text>
			</View>
		);
	}
}

export default Child;

而在父组件中，我们只需要通过props即可传递数据给子组件：

import React, { Component } from 'react';
import { View } from "react-native";
import Child from './Child';

class Parent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			text: "Hello React Native!"
		};
	}

	render() {
		return (
			<View>
				<Child text={this.state.text}></Child>
			</View>
		);
	}
}

export default Parent;

子组件向父组件传递消息

我们知道，React是单向数据流，并且数据是从上向下流的，因此只能由父组件通过props将数据传递给子组件，而子组件无法向父组件传递数据。但是在实际开发的过程中，我们经常会遇到子组件向父组件通信传值的需求，这种情况下，我们就需要实现子组件向父组件通信的操作。

/**
 * 这个是父组件
**/
import React, { Component } from 'react';
import { View } from "react-native";
import Child from './Child';

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: "Hello React Native!"
        };
    }

    updateMe(newText) {
        this.setState({ text: newText });
    }

    render() {
        return (
            <View>
                <Child text={this.state.text} updateParent={this.updateMe.bind(this)} />
            </View>
        );
    }
}

export default Parent;

/**
 * 这个是子组件
**/
import React, { Component } from 'react';
import { View, Text, Button } from "react-native";

class Child extends Component {
    constructor(props) {
        super(props);
    }

    updateParent(newText) {
        this.props.updateParent(newText);
    }

    render() {
        return (
            <View>
                <Text>{this.props.text}</Text>
                <Button title="点我修改父元素text" onPress={() => { this.updateParent("这是修改后的Text") }} />
            </View>
        );
    }
}

export default Child;

多级组件间通信

如果组件间父子层级过多，虽然也能通过上述方法一级一级地传递下去。但是组件之间嵌套逻辑太深，通信冗长，会导致用户体验下降，同时也会大幅降低App性能（可以想象一下事件从顶层传递给最底层，再由最底层一级一级向上调用的过程）。这种情况可以使用Context等方式进行跨级通信。

React-Native Context跨层级的组件通信

无前后关系组件通信

如果是没有父子关系的组件，可以通过AsyncStorage等方式进行通信。也可以使用EventEmitter/EventTarget/EventDispatcher继承或实现接口的方式、Signals模式或发布者/订阅者的广播形式实现无直接关系组件之间的通信。

React Native 生命周期

React Native框架中，所有的组件都具有生命周期。RN为开发者提供了多个生命周期函数，作为生命周期的每个阶段切入组件的钩子（hook）。下面将分阶段介绍一下RN的生命周期。

初始化阶段

1. getDefaultProps：在组件中，我们可以通过使用​this.props​初始化它的属性，而且在组件初始化后，再次使用这个组件不会调用​getDefaultProps​函数，所以组件不能自己修改​props​，只可由调用它的组件在外部进行修改。
2. getInitialState：该函数用于初始化组件的状态。该状态是随时变化的，也就是说这个函数不同于上面的getDefaultProps，该函数可以被多次调用。可以通过this.state.XXX获取该属性值，也可以通过this.setState对该值进行修改。
   一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次渲染，不过，React框架会根据DOM的状态自动判断是否需要真正渲染。

加载阶段

3. componentWillMount：组件将要开始加载，如果需要在组件开始加载前执行一些操作，就在这个函数内添加代码。
4. render：组件根据props和state生成DOM，并将其返回。
5. componentDidMount：组件挂载完毕。

更新阶段

当由于props或state变更导致组件需要重新渲染时，就会经历该阶段。该阶段的生命周期如下：

6. componentWillReceiveProps：当接收到更新的props时便会执行该函数。
7. shouldComponentUpdate：该函数用于判断props或state的更改是否会引起视图层的更新。默认情况下是会引起更新的，但开发者可以使用RN提供的这个函数自主决定什么时候触发更新，可用于减少不必要的UI更新以优化App性能。
8. componentWillUpdate：当函数shouldComponentUpdate返回True时，执行该函数，表示即将执行视图更新操作。从逻辑上其实可以明白，该函数执行期间是不允许再修改props和state的值的。
9. componentDidUpdate：组件更新完成后。该函数具有两个参数prevProps和prevState，分别表示更新前的props和state。

销毁阶段

10. componentWillUnmount：该函数在组件即将被卸载和注销前执行。

标签：生命周期,React,state,props,组件,import,Native
来源： https://blog.csdn.net/qq_53126706/article/details/120762499

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。