当前位置：首页 > news >正文

React Native的生命周期

news 2025/7/21 3:49:58

React Native 组件的生命周期分为三个阶段：Mounting（挂载）、Updating（更新） 和 Unmounting（卸载）。每个阶段都会触发不同的生命周期方法。

下面是详细的生命周期解释，并通过一个项目级的示例进行说明：

1. Mounting（挂载阶段）

当组件实例化并渲染到屏幕上时，会经历以下生命周期方法：

constructor(): 在组件实例化时调用，通常用来初始化状态或绑定事件处理方法。
static getDerivedStateFromProps(props, state): 在组件实例化和更新时，调用此方法来决定如何从 props 更新组件的 state。它返回一个对象来更新 state，或者返回 null 不做更新。
render(): 必须实现的方法，用来返回要渲染的 JSX 代码。
componentDidMount(): 组件渲染完成后调用。此方法常用于发送网络请求或添加事件监听器。

示例：

import React, { Component } from 'react';
import { View, Text } from 'react-native';class ExampleComponent extends Component {constructor(props) {super(props);this.state = { data: null };}static getDerivedStateFromProps(nextProps, nextState) {// 可以根据新传入的 props 更新 stateif (nextProps.shouldFetchData && !nextState.data) {return { data: 'Fetching data...' };}return null;}componentDidMount() {// 在组件挂载后，进行数据获取或其他副作用操作setTimeout(() => {this.setState({ data: 'Fetched data!' });}, 2000);}render() {return (<View><Text>{this.state.data}</Text></View>);}
}export default ExampleComponent;

2. Updating（更新阶段）

当组件的 state 或 props 发生变化时，组件将重新渲染。更新过程中的生命周期方法包括：

static getDerivedStateFromProps(props, state): 同样会在此阶段被调用（如上所示）。
shouldComponentUpdate(nextProps, nextState): 用来判断是否需要重新渲染组件。如果返回 false，则阻止重新渲染。
render(): 和挂载阶段一样，用来渲染组件。
getSnapshotBeforeUpdate(prevProps, prevState): 在更改发生之前调用。常用于在 DOM 更新之前获取一些信息，如滚动位置。
componentDidUpdate(prevProps, prevState, snapshot): 当组件更新后调用。此方法可以用于执行副作用操作（例如，发送网络请求）或更新外部系统。

示例：

import React, { Component } from 'react';
import { View, Text } from 'react-native';class ExampleComponent extends Component {constructor(props) {super(props);this.state = { count: 0 };}static getDerivedStateFromProps(nextProps, nextState) {// 根据 props 或 state 更新 statereturn null;}shouldComponentUpdate(nextProps, nextState) {// 如果 count 不变，阻止更新if (this.state.count === nextState.count) {return false;}return true;}componentDidUpdate(prevProps, prevState) {// 组件更新后，做一些副作用操作console.log('Component updated:', prevState.count, '->', this.state.count);}increment = () => {this.setState((prevState) => ({ count: prevState.count + 1 }));};render() {return (<View><Text>Count: {this.state.count}</Text><Button title="Increment" onPress={this.increment} /></View>);}
}export default ExampleComponent;

3. Unmounting（卸载阶段）

当组件从界面中移除时，会调用以下生命周期方法：

componentWillUnmount(): 在组件卸载前调用，通常用于清理定时器、取消网络请求或移除事件监听器。

示例：

import React, { Component } from 'react';
import { View, Text } from 'react-native';class ExampleComponent extends Component {constructor(props) {super(props);this.state = { timer: null };}componentDidMount() {// 设置定时器const timer = setInterval(() => {console.log('Timer is running...');}, 1000);this.setState({ timer });}componentWillUnmount() {// 清理定时器clearInterval(this.state.timer);console.log('Component will unmount, timer cleared');}render() {return (<View><Text>Timer is running, check console for logs.</Text></View>);}
}export default ExampleComponent;