组件：函数组件 / 类组件

React 基础速成

组件是 React 和 React Native 中构建用户界面的基本单位。在 React Native 中，我们可以使用两种类型的组件：函数组件和类组件。

1. 什么是组件？

组件是一个独立的、可重用的 UI 单元，它接收输入（props）并返回 React 元素来描述屏幕上应该显示什么。

组件的特点

• 可重用性：组件可以在应用的多个地方使用
• 封装性：组件可以封装自己的状态和逻辑
• 组合性：组件可以由其他组件组合而成
• 可维护性：组件化使代码更易于理解和维护

2. 函数组件

函数组件是最基本的组件类型，它是一个接收 props 并返回 React 元素的函数。

基本语法

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

function Greeting(props) {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
}

export default Greeting;

使用 ES6 箭头函数

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

const Greeting = (props) => {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
};

export default Greeting;

解构 props

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

const Greeting = ({ name }) => {
  return (
    <View>
      <Text>Hello, {name}!</Text>
    </View>
  );
};

export default Greeting;

使用默认值

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

const Greeting = ({ name = 'World' }) => {
  return (
    <View>
      <Text>Hello, {name}!</Text>
    </View>
  );
};

export default Greeting;

3. 类组件

类组件是使用 ES6 类语法定义的组件，它继承自 React.Component。

基本语法

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

class Greeting extends Component {
  render() {
    return (
      <View>
        <Text>Hello, {this.props.name}!</Text>
      </View>
    );
  }
}

export default Greeting;

使用类组件的状态

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

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <View>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={() => this.increment()} />
      </View>
    );
  }
}

export default Counter;

4. 函数组件 vs 类组件

对比

特性	函数组件	类组件
语法	简洁，使用函数	复杂，使用类
状态管理	使用 Hooks	使用 this.state
生命周期	使用 useEffect Hook	使用生命周期方法
性能	通常更好	相对较差
代码量	更少	更多

何时使用函数组件

• 当组件不需要管理状态时
• 当组件不需要生命周期方法时
• 当你想使用 Hooks 时
• 当你想要更简洁的代码时

何时使用类组件

• 当你需要使用传统的生命周期方法时
• 当你正在维护旧代码时
• 当你对 Hooks 不熟悉时

5. 组件的使用

基本使用

import { View } from 'react-native';
import Greeting from './Greeting';

export default function App() {
  return (
    <View>
      <Greeting name="React Native" />
    </View>
  );
}

嵌套组件

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

const Header = () => (
  <View>
    <Text>Header</Text>
  </View>
);

const Content = () => (
  <View>
    <Text>Content</Text>
  </View>
);

const Footer = () => (
  <View>
    <Text>Footer</Text>
  </View>
);

export default function App() {
  return (
    <View>
      <Header />
      <Content />
      <Footer />
    </View>
  );
}

组件通信

父组件向子组件传递数据

// 父组件
import { View } from 'react-native';
import ChildComponent from './ChildComponent';

export default function ParentComponent() {
  const data = 'Hello from parent';
  return (
    <View>
      <ChildComponent message={data} />
    </View>
  );
}

// 子组件
import { View, Text } from 'react-native';

const ChildComponent = ({ message }) => {
  return (
    <View>
      <Text>{message}</Text>
    </View>
  );
};

export default ChildComponent;

子组件向父组件传递数据

// 父组件
import { View, Text, Button } from 'react-native';
import ChildComponent from './ChildComponent';
import { useState } from 'react';

export default function ParentComponent() {
  const [message, setMessage] = useState('');

  const handleChildData = (data) => {
    setMessage(data);
  };

  return (
    <View>
      <Text>Message from child: {message}</Text>
      <ChildComponent onSendData={handleChildData} />
    </View>
  );
}

// 子组件
import { View, Button } from 'react-native';

const ChildComponent = ({ onSendData }) => {
  const sendData = () => {
    onSendData('Hello from child');
  };

  return (
    <View>
      <Button title="Send Data to Parent" onPress={sendData} />
    </View>
  );
};

export default ChildComponent;

6. 组件的最佳实践

1. 组件命名

• 使用 PascalCase 命名组件（首字母大写）
• 使用描述性的名称

2. 组件拆分

• 将复杂的 UI 拆分为多个小组件
• 每个组件只负责一个功能
• 保持组件的大小合理

3. 组件文件结构

• 每个组件放在单独的文件中
• 按功能组织组件
• 使用一致的文件命名约定

4. 组件的 props

• 明确组件的 props 类型
• 使用默认值
• 避免过多的 props

5. 组件的状态

• 只在必要时使用状态
• 保持状态尽可能简单
• 考虑使用状态管理库（如 Redux）管理复杂状态

7. 常见错误与解决方案

错误 1：忘记导出组件

错误：

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

const Greeting = () => {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
};

// 忘记导出

解决方案：

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

const Greeting = () => {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
};

export default Greeting;

错误 2：在函数组件中使用 this

错误：

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

const Greeting = (props) => {
  return (
    <View>
      <Text>Hello, {this.props.name}!</Text>
    </View>
  );
};

export default Greeting;

解决方案：

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

const Greeting = (props) => {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
};

export default Greeting;

错误 3：在类组件中忘记调用 super(props)

错误：

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

class Greeting extends Component {
  constructor(props) {
    // 忘记调用 super(props)
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <View>
        <Text>Hello</Text>
      </View>
    );
  }
}

export default Greeting;

解决方案：

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

class Greeting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <View>
        <Text>Hello</Text>
      </View>
    );
  }
}

export default Greeting;

8. 总结

组件是 React 和 React Native 中构建用户界面的基本单位。我们可以使用函数组件或类组件来创建 UI。

• 函数组件：简洁、使用 Hooks 管理状态和生命周期
• 类组件：使用传统的状态管理和生命周期方法

在现代 React 开发中，函数组件配合 Hooks 已经成为主流，因为它们更简洁、更易于理解和维护。

下一节，我们将学习 Props 与 State，这是 React 中数据传递和状态管理的核心概念。