React Native 组件开发

React Native 的核心是组件化开发，通过组合不同的组件来构建复杂的用户界面。本文将介绍 React Native 组件的开发方法和最佳实践。

基本组件

1. 基础组件

React Native 提供了一系列基础组件，如：

• View - 类似于 HTML 中的 div，用于布局
• Text - 用于显示文本
• Image - 用于显示图片
• TextInput - 用于文本输入
• TouchableOpacity - 可点击的按钮
• ScrollView - 可滚动的视图
• FlatList - 高效的列表组件
• SectionList - 分组列表组件

2. 组件的创建

函数组件

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

const Greeting = ({ name }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, {name}!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default Greeting;

类组件

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

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

  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Count: {this.state.count}</Text>
        <TouchableOpacity style={styles.button} onPress={this.increment}>
          <Text style={styles.buttonText}>Increment</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  text: {
    fontSize: 18,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 10,
    borderRadius: 5,
    marginTop: 10,
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
  },
});

export default Counter;

组件样式

1. 内联样式

<View style={{ backgroundColor: 'blue', padding: 10 }}>
  <Text style={{ color: 'white', fontSize: 16 }}>Hello World</Text>
</View>

2. StyleSheet

使用 StyleSheet.create 创建样式，这是推荐的方式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

// 使用
<View style={styles.container}>
  <Text style={styles.title}>Welcome</Text>
</View>

3. 样式继承

React Native 不支持样式继承，需要显式应用样式：

const styles = StyleSheet.create({
  baseText: {
    fontSize: 16,
  },
  boldText: {
    ...styles.baseText,
    fontWeight: 'bold',
  },
});

组件通信

1. 父组件向子组件传递 props

// 父组件
<ChildComponent name="React Native" age={5} />

// 子组件
const ChildComponent = ({ name, age }) => {
  return (
    <View>
      <Text>{name} is {age} years old</Text>
    </View>
  );
};

2. 子组件向父组件传递数据

// 父组件
const ParentComponent = () => {
  const [value, setValue] = useState('');

  const handleValueChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <View>
      <ChildComponent onValueChange={handleValueChange} />
      <Text>Value: {value}</Text>
    </View>
  );
};

// 子组件
const ChildComponent = ({ onValueChange }) => {
  const handleChange = () => {
    onValueChange('Hello from child');
  };

  return (
    <TouchableOpacity onPress={handleChange}>
      <Text>Send Data</Text>
    </TouchableOpacity>
  );
};

生命周期

函数组件的生命周期（使用 Hooks）

import React, { useState, useEffect } from 'react';

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

  // 组件挂载和更新时执行
  useEffect(() => {
    console.log('Component mounted or updated');
    
    // 清理函数，组件卸载时执行
    return () => {
      console.log('Component unmounted');
    };
  }, [count]); // 依赖项数组，只在 count 变化时执行

  return (
    <View>
      <Text>Count: {count}</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>Increment</Text>
      </TouchableOpacity>
    </View>
  );
};

类组件的生命周期

• componentDidMount - 组件挂载后执行
• componentDidUpdate - 组件更新后执行
• componentWillUnmount - 组件卸载前执行
• shouldComponentUpdate - 决定组件是否需要更新

性能优化

1. 使用 PureComponent 或 React.memo

// 类组件
class MyComponent extends React.PureComponent {
  render() {
    return <Text>{this.props.text}</Text>;
  }
}

// 函数组件
const MyComponent = React.memo(({ text }) => {
  return <Text>{text}</Text>;
});

2. 避免在 render 方法中创建新函数

// 不好的做法
render() {
  return (
    <TouchableOpacity onPress={() => this.handlePress(item)}>
      <Text>Press</Text>
    </TouchableOpacity>
  );
}

// 好的做法
handlePress = (item) => () => {
  // 处理点击
};

render() {
  return (
    <TouchableOpacity onPress={this.handlePress(item)}>
      <Text>Press</Text>
    </TouchableOpacity>
  );
}

3. 使用 FlatList 而不是 ScrollView + map

对于长列表，使用 FlatList 可以提高性能：

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemComponent item={item} />}
/>

最佳实践

1. 组件拆分：将复杂组件拆分为多个小的、可复用的组件
2. 样式管理：使用 StyleSheet.create 或第三方库如 styled-components
3. 状态管理：对于复杂状态，使用 Redux、MobX 或 Context API
4. 错误处理：使用 ErrorBoundary 或 try-catch 处理错误
5. 测试：使用 Jest 和 React Testing Library 进行测试
6. 文档：为组件编写清晰的文档和注释

总结

React Native 组件开发遵循 React 的核心原则，同时结合了原生移动开发的特点。通过合理的组件设计和性能优化，可以构建出高效、可维护的移动应用。