2-13 RN之React基础React Native 前置知识：React 组件 React 组件类似于 JavaSc

React Native 前置知识：React

组件

React 组件类似于 JavaScript 函数，接受入参（props），并返回描述页面展示内容的 React 元素。组件可以是函数组件或类组件。

函数组件示例

function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

类组件示例

class Hello extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

JSX 语法

JSX 是 JavaScript 的一种语法扩展，允许在代码中直接书写类似 HTML 的结构。它不是 HTML，也不是纯 JavaScript，经过 Babel 转译后会变成 JavaScript 代码。

JSX 示例

const element = <h1 title="标题">Hello World</h1>;

// 转译后的 JavaScript
const element = React.createElement('h1', { title: '标题' }, 'Hello World');

错误写法

// 错误写法：必须有一个最外层元素
const element = (
  <li>第一行</li><li>第二行</li>
);

// 正确写法：使用 Fragment 组件或短语法 <>
const element = <><li>第一行</li><li>第二行</li></>;

表达式插入

在 JSX 中，可以使用 {} 插入 JavaScript 表达式，表达式的结果会渲染到页面上。可以插入变量、计算结果或函数执行结果。

const user = "John";
const element = <h1>Hello, {user}!</h1>;

`state` 和 `setState`

state 是组件内的普通 JavaScript 对象，用于存储组件的信息，这些信息控制组件的渲染输出。setState 用于修改 state，并触发组件重新渲染。

示例：修改 `state`

import React, { Component } from 'react';

class Button extends Component {
  state = { color: 'red' };

  onClick = () => {
    this.setState({ color: 'blue' });
  }

  render() {
    const { color } = this.state;
    return <button style={{ color }} onClick={this.onClick}>按钮</button>;
  }
}

export default Button;

`setState` 是异步的

setState 是一个合并操作，而非覆盖操作。在调用 setState 后，立即访问 state 可能获取到的仍然是更新前的值。

`props`

props 是传递给组件的普通 JavaScript 对象，类似于函数的参数。React 会将 JSX 中的属性转换成一个对象，传递给组件，组件可以通过 this.props 访问这些值。

<Image source={logoImg} style={styles.logo} />

生命周期

只有类组件才有生命周期。生命周期可以分为三个阶段：挂载、更新和卸载。

挂载阶段

当一个类组件被挂载时，按顺序执行以下生命周期方法：

constructor：初始化组件状态
render：渲染组件内容
componentDidMount：组件挂载完成，适合进行网络请求或 DOM 操作

更新阶段

当组件的 state 或 props 发生变化时，组件会重新渲染，并执行以下生命周期方法：

render：每次组件渲染时调用

卸载阶段

当组件从 DOM 中被移除时，执行以下生命周期方法：

componentWillUnmount：在组件卸载前执行，适合清理资源

2-13 RN之React基础