ReactHooks怎样实现组件复用

React Hooks 是 React 16.8 版本中新增加的一种特性，它允许在函数组件中使用 state 和其他 React 特性，而无需编写 class 组件。要实现组件复用，你可以使用以下几种常见的 Hooks：

useState: 用于在函数组件中添加 state。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

在这个例子中，Counter 组件可以被复用，因为它使用了 useState Hook 来管理状态。 2. useEffect: 用于在函数组件中处理副作用，如数据获取、订阅或手动更改 DOM。

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

function Example() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空数组作为依赖项，确保只在组件挂载时运行一次

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default Example;

在这个例子中，Example 组件使用 useEffect Hook 来获取数据，并在数据获取后更新状态。由于 useEffect 的依赖项数组为空，它只会在组件挂载时运行一次，因此这个组件可以被复用。 3. useContext: 用于在函数组件中访问 React 上下文。

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button style={{ backgroundColor: theme === 'light' ? 'blue' : 'white' }} onClick={toggleTheme}>
      Toggle Theme
    </button>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

在这个例子中，ThemeProvider 组件使用 useContext Hook 来提供主题信息，而 ThemedButton 组件则使用 useContext 来获取主题信息并切换主题。由于 ThemeProvider 可以包裹任何子组件，因此 ThemedButton 可以在任何地方被复用。

总的来说，React Hooks 提供了一种在函数组件中实现状态管理、副作用处理和上下文访问的方法，从而使得组件更易于复用和维护。

最新问答

相关标签