React中常见的Hook
-
- [1. 常见的React Hooks](#1. 常见的React Hooks)
-
- [1.1 useState](#1.1 useState)
- [1.2 useEffect](#1.2 useEffect)
- [1.3. useContext](#1.3. useContext)
- [1.4. useRef](#1.4. useRef)
- [1.5. useMemo和useCallback](#1.5. useMemo和useCallback)
- [2. 自定义Hook的创建和使用](#2. 自定义Hook的创建和使用)
React Hooks是React 16.8版本引入的一个新特性,它允许在函数组件中使用状态和其他React特性,而无需编写类组件。Hooks的使用简化了组件的逻辑,提高了代码的复用性,并且使得状态管理更加直观。
1. 常见的React Hooks
1.1 useState
useState是最基本的Hook,它允许你在函数组件中添加状态。
javascript
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(prevCount => prevCount + 1)}>
Increment
</button>
</div>
);
}
在这个例子中,我们使用useState创建了一个名为count的状态,并通过setCount函数来更新它。
1.2 useEffect
useEffectHook用于处理副作用,例如数据获取、订阅或手动DOM操作。
javascript
import React, { useState, useEffect } from 'react';
function Example() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
setWidth(window.innerWidth);
}, []);
return (
<div>
<p>You can use the browser's width:</p>
<p>{width} px</p>
</div>
);
}
在这个例子中,我们使用useEffect来监听窗口宽度的变化,并更新状态width。
1.3. useContext
useContext允许你从React的Context中消费值,而不必通过层叠的组件树传递props。
javascript
import React, { useContext } from 'react';
import MyContext from './MyContext';
function ChildComponent() {
const contextValue = useContext(MyContext);
return <h1>{contextValue}</h1>;
}
在这个例子中,我们使用useContext来获取MyContext中传递的值。
1.4. useRef
useRef返回一个可变的ref对象,其.current属性被初始化为传入的参数。
javascript
import React, { useRef } from 'react';
function TextInput() {
const inputRef = useRef();
useEffect(() => {
inputRef.current.focus();
}, []);
return (
<input type="text" ref={inputRef} />
);
}
在这个例子中,我们使用useRef来聚焦输入框。
1.5. useMemo和useCallback
useMemo和useCallback都用于缓存值,以避免在每次渲染时都重新计算。
javascript
import React, { useMemo, useCallback } from 'react';
function ParentComponent() {
const [count, setCount] = useState(0);
const memoizedValue = useMemo(() => {
console.log('Calculating memoized value');
return count * 2;
}, [count]);
const memoizedCallback = useCallback(() => {
console.log('Memoized callback');
}, []);
return (
<div>
<p>Count: {count}</p>
<p>Memoized value: {memoizedValue}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={memoizedCallback}>Click me</button>
</div>
);
}
在这个例子中,我们使用useMemo来缓存计算结果,使用useCallback来缓存一个函数。
2. 自定义Hook的创建和使用
自定义Hook是将Hook的逻辑封装到可复用的函数中的一种方式。自定义Hook可以与任何其他Hook结合使用,并且可以在多个组件之间共享状态逻辑。
javascript
// useDarkMode.js
import { useState, useEffect } from 'react';
export default function useDarkMode() {
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
}, []);
const toggleDarkMode = useCallback(() => {
setIsDarkMode(!isDarkMode);
}, [isDarkMode]);
return { isDarkMode, toggleDarkMode };
}
// SomeComponent.js
import React, { useContext } from 'react';
import useDarkMode from './useDarkMode';
function SomeComponent() {
const { isDarkMode, toggleDarkMode } = useDarkMode();
return (
<div>
<button onClick={toggleDarkMode}>Toggle Dark Mode</button>
<p>Dark Mode: {isDarkMode ? 'On' : 'Off'}</p>
</div>
);
}
在这个例子中,我们创建了一个自定义Hook useDarkMode,它管理应用的暗色模式状态,并提供了一个切换模式的函数。然后在SomeComponent中使用这个自定义Hook。