React Native 全栈开发实战班 ：数据管理与状态之React Hooks 基础

在 React Native 应用中，数据管理与状态管理是构建复杂用户界面的关键。React 提供了多种工具和模式来处理数据流和状态管理，包括 React Hooks、Context API 以及第三方状态管理库（如 Redux）。本章节将详细介绍 React Hooks 的基础用法、组件间通信、状态管理入门以及异步数据处理和本地存储的实现。

---

1. React Hooks 基础

React Hooks 是 React 16.8 引入的新特性，允许开发者在函数组件中使用状态和其他 React 特性，而无需编写类组件。Hooks 提供了一种更简洁、更直观的方式来管理组件状态和副作用。

1.1 useState

useState 是最常用的 Hook，用于在函数组件中添加状态。

语法：

const [state, setState] = useState(initialState);

• state：当前状态。
• setState：更新状态的函数。
• initialState：状态的初始值。

示例：

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

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

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    marginBottom: 10,
  },
});

export default Counter;

解释：

• useState(0) 初始化 count 状态为 0。
• setCount 用于更新 count 状态。

1.2 useEffect

useEffect 用于处理副作用，例如数据获取、订阅、手动操作 DOM 等。

语法：

useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数
  };
}, [dependencies]);

• 第一个参数是副作用函数。
• 第二个参数是依赖数组，指定副作用何时执行。

示例：

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://example.com/api/data')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error));
  }, []);

  return (
    <View style={styles.container}>
      {data ? <Text style={styles.text}>{JSON.stringify(data)}</Text> : <Text>Loading...</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
  },
});

export default DataFetcher;

解释：

• useEffect 在组件挂载时执行数据获取操作。
• 空依赖数组 [] 表示副作用只在组件挂载和卸载时执行。

1.3 其他常用 Hooks

• useContext： 接收一个 context 对象并返回当前 context 的值。
• useReducer： 类似于 Redux 的 reducer，用于复杂的状态逻辑。
• useCallback： 缓存函数，避免不必要的重新渲染。
• useMemo： 缓存计算结果，避免不必要的重新计算。

示例：

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

const MyContext = React.createContext();

const ContextExample = () => {
  const value = useContext(MyContext);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Context Value: {value}</Text>
    </View>
  );
};

const App = () => {
  return (
    <MyContext.Provider value="Hello, Context!">
      <ContextExample />
    </MyContext.Provider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
  },
});

export default App;

---

2. 组件间通信

在 React Native 应用中，组件间通信是实现复杂交互和状态共享的重要机制。以下是几种常见的组件间通信方式：

2.1 Props

通过组件的 props 属性传递数据。

示例：

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

const Parent = () => {
  const message = 'Hello, Child!';

  return (
    <View style={styles.container}>
      <Child message={message} />
    </View>
  );
};

const Child = ({ message }) => (
  <View style={styles.child}>
    <Text style={styles.text}>{message}</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  child: {
    backgroundColor: '#f0f0f0',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    fontSize: 16,
  },
});

export default Parent;

2.2 Callback Functions

通过回调函数传递数据或事件。

示例：

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

const Parent = () => {
  const [message, setMessage] = useState('Hello, Child!');

  const handleChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <View style={styles.container}>
      <Child onChange={handleChange} />
      <Text style={styles.text}>{message}</Text>
    </View>
  );
};

const Child = ({ onChange }) => {
  const newMessage = 'New Message from Child';

  return (
    <View style={styles.child}>
      <Button title="Change Message" onPress={() => onChange(newMessage)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  child: {
    margin: 10,
  },
  text: {
    fontSize: 16,
    marginTop: 10,
  },
});

export default Parent;

导师简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师