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

1. 函数组件

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

1.1 基本定义方式

// 普通函数组件functionGreeting(props){return<Text>Hello,{props.name}</Text>;}// 箭头函数组件constGreeting=(props)=>(<Text>Hello,{props.name}</Text>);

1.2 使用Hook的函数组件

importReact,{useState}from'react';import{View,Text,Button}from 'react-native';constCounter=()=>{const[count,setCount]=useState(0);return(<View><Text>点击次数:{count}</Text><Buttontitle="点击"onPress={()=>setCount(count+1)}/></View>);};

2. 如何理解RN中的Props

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

<MyComponentname="Tom"age={25}gender="男"/>constMyComponent=(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 渲染、动画执行、手势识别等高性能操作