反应钩子-js教程-PHP中文网

反应钩子

WBOY

发布： 2024-08-29 12:13:02

原创

884 人浏览过

React Hooks

React Hooks 是允许您在功能组件中使用状态和其他 React 功能的函数，这些功能传统上仅在类组件中可用。它们在 React 16.8 中引入，并从此成为编写 React 组件的标准。以下是最常用钩子的细分：

1. useState

用途：管理功能组件中的状态。
用法：

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0); // Declare a state variable called 'count'

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

登录后复制

说明：useState 返回一个包含两个元素的数组：当前状态值 (count) 和更新它的函数 (setCount)。这允许您维护和更新功能组件内的状态。

2. 使用效果

用途：处理副作用，例如获取数据、订阅或手动更改功能组件中的 DOM。
用法：

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

  function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once after the initial render.

    return <div>{data ? data : 'Loading...'}</div>;
  }

登录后复制

说明：useEffect 有两个参数：一个运行效果的函数和一个可选的依赖数组。效果函数在组件渲染后运行。如果您提供依赖项数组，则仅当这些依赖项发生更改时才会运行效果。

3. useContext

用途：访问功能组件内上下文的值。
用法：

  import React, { useContext } from 'react';
  const ThemeContext = React.createContext('light');

  function DisplayTheme() {
    const theme = useContext(ThemeContext); // Access the current theme context value

    return <div>The current theme is {theme}</div>;
  }

登录后复制

说明：useContext 允许您直接在功能组件中使用上下文值，而不需要 Consumer 组件。

4. 使用Reducer

用途：管理功能组件中的复杂状态逻辑，作为useState的替代方案。
用法：

  import React, { useReducer } from 'react';

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        return state;
    }
  }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
      <div>
        <p>Count: {state.count}</p>
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </div>
    );
  }

登录后复制

说明：useReducer 对于管理依赖于更复杂逻辑或多个操作的状态很有用。它接受一个减速器函数和一个初始状态，并返回当前状态和一个调度函数。

5. useRef

用途：访问并存储对跨渲染持续存在的 DOM 元素或值的可变引用。
用法：

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

  function TextInputWithFocusButton() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
      inputEl.current.focus(); // Access the DOM element directly
    };

    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </>
    );
  }

登录后复制

说明：useRef 返回一个带有 .current 属性的可变对象，该属性可以保存值或对 DOM 元素的引用。该值在渲染过程中保持不变，更新时不会触发重新渲染。

6. useMemo 和 useCallback

目的：通过记忆昂贵的计算或函数来优化性能。
用法：

  import React, { useMemo, useCallback } from 'react';

  function Example({ items }) {
    const expensiveCalculation = useMemo(() => {
      return items.reduce((a, b) => a + b, 0);
    }, [items]);

    const memoizedCallback = useCallback(() => {
      console.log('This function is memoized');
    }, []);

    return <div>{expensiveCalculation}</div>;
  }

登录后复制