阅读量:0
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 提供了一种在函数组件中实现状态管理、副作用处理和上下文访问的方法，从而使得组件更易于复用和维护。
