【跨端技术React Native】入门学习随笔记录

studyForMokey2026-01-25 8:15

文章目录

[1. 函数组件](#1. 函数组件)
- [1.1 基本定义方式](#1.1 基本定义方式)
- [1.2 使用Hook的函数组件](#1.2 使用Hook的函数组件)
[2. 如何理解RN中的Props](#2. 如何理解RN中的Props)
[3. 双线程架构](#3. 双线程架构)

1. 函数组件

在 React Native 中，函数组件（Function Component）是一种定义 UI 组件的简洁方式。它本质上是一个 JavaScript 函数，接收 props 作为参数，并返回一个 JSX 元素（即 UI 结构）。

1.1 基本定义方式

java 复制代码

// 普通函数组件
function Greeting(props) {
  return <Text>Hello, {props.name}</Text>;
}

// 箭头函数组件
const Greeting = (props) => (
  <Text>Hello, {props.name}</Text>
);

1.2 使用Hook的函数组件

java 复制代码

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>点击次数: {count}</Text>
      <Button title="点击" onPress={() => setCount(count + 1)} />
    </View>
  );
};

2. 如何理解RN中的Props

在 React 和 React Native 中，当你向一个组件传递属性（attributes）时，这些属性会被自动封装成一个对象，这个对象就是 props。

java 复制代码

<MyComponent name="Tom" age={25} gender="男" />

const MyComponent = (props) => {
  console.log(props); // 输出：{ name: "Tom", age: 25, gender: "男" }
  return (
    <View>
      <Text>姓名：{props.name}</Text>
      <Text>年龄：{props.age}</Text>
      <Text>性别：{props.gender}</Text>
    </View>
  );
};

你可以像操作普通对象一样使用 props：

获取属性：props.name
解构赋值：const { name, age } = props;
props 是只读的（immutable），不能直接修改。
不要直接修改 props，应该通过父组件传递新的值或使用 state 来管理变化。

3. 双线程架构

React Native 采用双线程架构：

JavaScript 线程：运行你的业务逻辑、状态更新、组件渲染等。

原生线程：负责 UI 渲染、动画执行、手势识别等高性能操作