广汉网站建设ghxhwl中国航天科工集团有限公司

React Hooks是React 16.8版本引入的功能，它允许你在函数组件中使用状态（state）和其他React特性，而无需编写类组件。以下是一些常用的React Hooks及其用法：

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

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1);};return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button></div>);
}

2： useEffect：用于执行副作用操作，比如数据获取、订阅事件等。

import React, { useState, useEffect } from 'react';function DataFetcher() {const [data, setData] = useState(null);useEffect(() => {// 在组件加载后执行数据获取操作fetchData();}, []);const fetchData = async () => {const response = await fetch('https://api.example.com/data');const data = await response.json();setData(data);};return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
}

3： useContext：用于在组件中访问React的上下文（context）。

import React, { useContext } from 'react';const ThemeContext = React.createContext('light');function ThemeComponent() {const theme = useContext(ThemeContext);return <p>Current theme: {theme}</p>;
}

4： useReducer：用于在函数组件中管理复杂的状态逻辑，类似于Redux的reducer。

import React, { useReducer } from 'react';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();}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
}

这些是一些常用的React Hooks，但还有其他一些可用的Hooks，如useCallback、useMemo、useRef等，它们提供了更多的功能和灵活性。