React中常见的Hook

1. 常见的React Hooks1.1 useState1.2 useEffect1.3. useContext1.4. useRef1.5. useMemo和useCallback

2. 自定义Hook的创建和使用

React Hooks是React 16.8版本引入的一个新特性，它允许在函数组件中使用状态和其他React特性，而无需编写类组件。Hooks的使用简化了组件的逻辑，提高了代码的复用性，并且使得状态管理更加直观。

1. 常见的React Hooks

1.1 useState

  useState是最基本的Hook，它允许你在函数组件中添加状态。

import React, { useState } from 'react';

function Counter() {

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

return (

);

}

  在这个例子中，我们使用useState创建了一个名为count的状态，并通过setCount函数来更新它。

1.2 useEffect

  useEffectHook用于处理副作用，例如数据获取、订阅或手动DOM操作。

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

function Example() {

const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {

setWidth(window.innerWidth);

}, []);

return (

);

}

  在这个例子中，我们使用useEffect来监听窗口宽度的变化，并更新状态width。

1.3. useContext

useContext允许你从React的Context中消费值，而不必通过层叠的组件树传递props。

import React, { useContext } from 'react';

import MyContext from './MyContext';

function ChildComponent() {

const contextValue = useContext(MyContext);

return

{contextValue}

}

  在这个例子中，我们使用useContext来获取MyContext中传递的值。

1.4. useRef

  useRef返回一个可变的ref对象，其.current属性被初始化为传入的参数。

import React, { useRef } from 'react';

function TextInput() {

const inputRef = useRef();

useEffect(() => {

inputRef.current.focus();

}, []);

return (

);

}

  在这个例子中，我们使用useRef来聚焦输入框。

1.5. useMemo和useCallback

  useMemo和useCallback都用于缓存值，以避免在每次渲染时都重新计算。

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 (

);

}

  在这个例子中，我们使用useMemo来缓存计算结果，使用useCallback来缓存一个函数。

2. 自定义Hook的创建和使用

  自定义Hook是将Hook的逻辑封装到可复用的函数中的一种方式。自定义Hook可以与任何其他Hook结合使用，并且可以在多个组件之间共享状态逻辑。

// 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 (

);

}

  在这个例子中，我们创建了一个自定义Hook useDarkMode，它管理应用的暗色模式状态，并提供了一个切换模式的函数。然后在SomeComponent中使用这个自定义Hook。

好文链接