RN | class 组件和函数式组件

class 组件

特点

  • 有状态(state),每次都是修改同一个状态
  • 基于生命周期管理
  • 面向对象
jsx 复制代码
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {View} from 'react-native';

export class ClassView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <View style={{width: 200, height: 200, backgroundColor: 'blue'}} />;
  }
}

生命周期

constructor->render->componentDidMount->componentWillUnmount(当组件即将从 DOM 中移除时会触发)

props 传递

jsx 复制代码
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Text, View} from 'react-native';

export class ClassView extends React.Component {
  constructor(props) {
    console.log('constructor...');
    super(props);
  }

  componentDidMount() {
    console.log('componentDidMount...');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount...');
  }

  render() {
    console.log('render...');
    const {name, age, gender} = this.props;
    return (
      <View
        style={{
          width: '100%',
          height: 200,
          backgroundColor: 'blue',
        }}>
        <Text style={{color: '#fff'}}>{name}</Text>
        <Text style={{color: '#fff'}}>{age}</Text>
      </View>
    );
  }
}

class 组件内部的 state

jsx 复制代码
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Text, View} from 'react-native';

export class ClassView extends React.Component {
  constructor(props) {
    console.log('constructor...');
    super(props);
    this.state = {
      showDetail: true,
    };
  }

  componentDidMount() {
    console.log('componentDidMount...');

    // 5s后隐藏具体信息
    setTimeout(() => {
      this.setState({
        showDetail: false,
      });
    }, 5000);
  }

  render() {
    console.log('render...');
    const {name, age, gender} = this.props;
    return (
      <View
        style={{
          width: '100%',
          height: 200,
          backgroundColor: 'blue',
        }}>
        {this.state.showDetail && (
          <>
            <Text style={{color: '#fff'}}>{name}</Text>
            <Text style={{color: '#fff'}}>{age}</Text>
            <Text style={{color: '#fff'}}>{gender}</Text>
          </>
        )}
      </View>
    );
  }
}

函数式组件和hook

特点

  • 无状态,每次刷新都是生成一个新的状态
  • 基于状态变化的管理
  • 简洁,代码少,易于复用

hooks

  • useState
  • useRef
  • useWindowDimensions
  • useColorScheme

useWindowDimensions

useWindowDimensions 是一个用于获取设备窗口尺寸的 Hook,它会在窗口大小发生变化时自动更新。这对于响应式布局特别有用。

useWindowDimensions 返回一个对象,包含以下属性:

ts 复制代码
interface WindowDimensions {
  width: number;       // 窗口宽度
  height: number;      // 窗口高度
  scale: number;       // 设备像素比
  fontScale: number;   // 字体缩放比例
}

useColorScheme

用于获取用户设备当前的颜色主题偏好(深色或浅色模式)

useColorScheme() 返回值可能是:

  • 'light' - 浅色模式
  • 'dark' - 深色模式
  • null - 未知或不支持

PS:

  • 需要在 React Native 0.63 或更高版本中使用
  • iOS 13+ 和 Android 10+ 才能完全支持

例子:

jsx 复制代码
import { useColorScheme } from 'react-native';

function MyComponent() {
  const colorScheme = useColorScheme();
  
  return (
    <View style={{
      backgroundColor: colorScheme === 'dark' ? '#000' : '#fff',
      // ...
    }}>
      <Text style={{
        color: colorScheme === 'dark' ? '#fff' : '#000',
      }}>
        当前主题: {colorScheme}
      </Text>
    </View>
  );
}
相关推荐
布兰妮甜2 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia3 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
前端小巷子22 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168829 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼1 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er2 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端