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 logic
return 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() {
// 在组件挂载之前,从页面参数中获取商品ID
const id = this.$route.query.id
// 这里可以进行数据请求,获取商品详情数据
}
render() {
// 渲染商品详情页面
return (
<View>
{/* 商品详情内容 */}
</View>
)
}
}
export default DetailPage