Taro 框架 React Native 开发

1、生命周期

参考：React Native组件（一）组件的生命周期_reactnative constructor介绍-CSDN博客

1.1构造函数(constructor)

1、第一个语句必须是super(props)。

2、contructor将在任意一个RN组件被加载之前优先调用，并且只会调用一次。

3、该函数最大的作用是定义该组件当中需要使用的状态机变量 。

constructor(props) {super(props);this.myProperty1 = 'test';this.myProperty2 = true;this.state = {//定义状态机变量inputedNum: '',inputedPW: ''};this.updatePW = this.updatePW.bind(this);this.jumpToWaiting = this.jumpToWaiting.bind(this);
}

1.2构造函数(constructor)

React Native 的组件生命周期可以被划分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。以下是每个阶段的关键方法：

挂载阶段：constructor()、componentWillMount()、render()、componentDidMount()

更新阶段：componentWillReceiveProps(nextProps)、shouldComponentUpdate(nextProps, nextState)、componentWillUpdate(nextProps, nextState)、render()、componentDidUpdate(prevProps, prevState)

卸载阶段：componentWillUnmount()

import React, { Component } from 'react';
import { Text, View } from 'react-native';class MyComponent extends Component {constructor(props) {super(props);this.state = { counter: 0 };console.log('Component is being constructed');}componentWillMount() {console.log('Component is about to be mounted');}componentDidMount() {console.log('Component has been mounted');}componentWillReceiveProps(nextProps) {console.log('Component will receive new props:', nextProps);}shouldComponentUpdate(nextProps, nextState) {console.log('Should component update? Current state:', this.state, 'Next state:', nextState);// Return true or false based on your logicreturn true;}componentWillUpdate(nextProps, nextState) {console.log('Component is about to update. Current state:', this.state, 'Next state:', nextState);}componentDidUpdate(prevProps, prevState) {console.log('Component has updated. Previous state:', prevState, 'Current state:', this.state);}componentWillUnmount() {console.log('Component is about to unmount');}render() {return (<View><Text>Counter: {this.state.counter}</Text></View>);}
}export default MyComponent;

2、页面跳转方式

import Taro from '@tarojs/taro';handleDetails = () => {// Taro.redirectTo({//   url: '/pages/home/details/index'// })Taro.navigateTo({url: '/v2/pages/home/details/index'})}

// ListPage.js
import Taro from '@tarojs/taro'class ListPage extends Taro.Component {// 假设这是列表项的点击事件处理函数handleItemClick = (itemId) => {// 使用Taro的导航方法跳转到详情页面，并将商品ID作为参数传递Taro.navigateTo({url: '/pages/detail/detail?id=' + itemId})}render() {// 渲染列表项，并绑定点击事件return (<View>{/* 假设这里有一个列表渲染 */}<View onClick={() => this.handleItemClick(item.id)}>{/* 列表项内容 */}</View></View>)}
}export default ListPage

// DetailPage.js
import Taro from '@tarojs/taro'class DetailPage extends Taro.Component {componentWillMount() {// 在组件挂载之前，从页面参数中获取商品IDconst id = this.$route.query.id// 这里可以进行数据请求，获取商品详情数据}render() {// 渲染商品详情页面return (<View>{/* 商品详情内容 */}</View>)}
}export default DetailPage

taro中跳转页面的几种带参方式_taro页面跳转-CSDN博客