React中常见的Hook

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。

相关推荐
然我13 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子17 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹21 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器27 分钟前
指定阿里镜像原理
前端
枷锁—sha32 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha34 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux