文章目录
- 1. 函数组件
- 1.1 基本定义方式
- 1.2 使用Hook的函数组件
- 2. 如何理解RN中的Props
- 3. 双线程架构
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 渲染、动画执行、手势识别等高性能操作
