当前位置：首页 > news >正文

react基础之reactHooks

news 2025/7/10 23:12:36

在这里插入图片描述

文章目录

- React Hooks 使用指南
- - - 常用 Hooks
    - 使用规则
- 小结

React Hooks 使用指南

React Hooks 是 React 16.8 引入的一种新特性，允许在函数组件中使用状态和其他 React 特性，而无需编写类组件。以下是一些基础的 Hooks 及其使用规则。

常用 Hooks

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

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>);
}

useEffect
处理副作用（如数据获取、订阅等）。

import React, { useState, useEffect } from 'react';function DataFetchingComponent() {const [data, setData] = useState([]);useEffect(() => {fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data));}, []);return (<div>{data.map(item => (<div key={item.id}>{item.name}</div>))}</div>);
}

useContext
共享数据的上下文。

import React, { createContext, useContext } from 'react';const MyContext = createContext();function MyComponent() {const value = useContext(MyContext);return <div>{value}</div>;
}function App() {return (<MyContext.Provider value="Hello, World!"><MyComponent /></MyContext.Provider>);
}

useReducer
管理复杂状态。

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>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></div>);
}

自定义 Hook
创建可复用的逻辑。

import { useState, useEffect } from 'react';function useFetch(url) {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);useEffect(() => {fetch(url).then(response => response.json()).then(data => {setData(data);setLoading(false);});}, [url]);return { data, loading };
}