react native hooks写法

在 React Native 中，React Hooks 是一种让函数组件可以使用状态和其他 React 特性的方法。以下是 React Native 中使用 Hooks 的最新写法和示例：

1. 使用 useState Hook

useState 用于在函数组件中添加状态：

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

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

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button title="Click me" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

2. 使用 useEffect Hook

useEffect 用于处理副作用操作，例如数据获取或订阅：

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

const Timer = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    return () => clearInterval(intervalId); // 清理定时器
  }, []);

  return (
    <View>
      <Text>Time elapsed: {time} seconds</Text>
    </View>
  );
};

export default Timer;

3. 使用 useContext Hook

useContext 用于访问 React 上下文：

import React, { useContext } from 'react';
import { View, Text } from 'react-native';
import { ThemeContext } from './ThemeContext';

const ThemedText = () => {
  const theme = useContext(ThemeContext);

  return (
    <Text style={{ color: theme.textColor }}>Hello, World!</Text>
  );
};

export default ThemedText;

4. 使用 useReducer Hook

useReducer 用于管理复杂的状态逻辑：

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

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <View>
      <Text>Count: {state.count}</Text>
      <Button title="+" onPress={() => dispatch({ type: 'increment' })} />
      <Button title="-" onPress={() => dispatch({ type: 'decrement' })} />
    </View>
  );
};

export default Counter;

5. 使用 useCallback Hook

useCallback 用于记忆回调函数，避免不必要的重新渲染：

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

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

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button title="Click me" onPress={increment} />
    </View>
  );
};

export default Counter;

6. 自定义 Hooks

自定义 Hooks 可以将逻辑提取到可重用的函数中：

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network response was not ok');
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, error, loading };
};

export default useFetch;

总结

React Hooks 提供了一种更简洁和高效的方式来管理状态和副作用。通过 useState、useEffect、useContext、useReducer、useCallback 等内置 Hooks，以及自定义 Hooks，你可以更好地组织 React Native 应用的逻辑。