React.js中Hooks怎么用

在React.js中，Hooks是一种特殊的函数，它允许你在不编写类组件的情况下使用state和其他React特性。Hooks于React 16.8版本引入，使得函数组件更加强大和灵活。以下是一些常用的Hooks及其用法：

1. useState

useState 是一个让函数组件可以使用 state 的 Hook。

import React, { useState } from 'react';

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

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

2. useEffect

useEffect 是一个让你在函数组件中使用副作用（如数据获取、订阅、手动更改DOM等）的 Hook。

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

3. useContext

useContext 是一个让你在函数组件中访问 React context 的 Hook。

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>I am styled by theme context!</button>;
}

4. useReducer

useReducer 是一个让函数组件可以使用更复杂 state 逻辑的 Hook。

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:
      throw new Error();
  }
}

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

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

5. useCallback

useCallback 是一个让你在函数组件中缓存函数实例的 Hook。

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

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, [setCount]); // 依赖项数组

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

6. useMemo

useMemo 是一个让你在函数组件中缓存计算结果的 Hook。

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

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

  const doubleCount = useMemo(() => {
    return count * 2;
  }, [count]); // 依赖项数组

  return (
    <div>
      <p>{doubleCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

7. useRef

useRef 是一个让你在函数组件中持久化存储数据的 Hook。

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

8. useImperativeHandle

useImperativeHandle 是一个与 ref 一起使用的 Hook，它允许你自定义 ref 暴露给父组件的实例值。

import React, { useRef, useImperativeHandle, useState } from 'react';

const FancyInput = React.forwardRef((props, ref) => {
  const [value, setValue] = useState('');
  useImperativeHandle(ref, () => ({
    getValue: () => value
  }));
  return <input ref={ref} value={value} onChange={e => setValue(e.target.value)} />;
});

9. useLayoutEffect

useLayoutEffect 的用法和 useEffect 类似，但它会在所有的 DOM 变更之后同步调用。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

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

function Example() {
  const divRef = useRef();

  useLayoutEffect(() => {
    // 测量 div 的尺寸
    const rect = divRef.current.getBoundingClientRect();
    console.log(rect.height); // 输出 div 的高度
  });

  return <div ref={divRef}>Hello, world!</div>;
}

10. useDebugValue

useDebugValue 可以在自定义 Hook 中使用，以在 React 开发者工具中显示自定义 Hook 的标签。

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

function useCustomCounter() {
  const [count, setCount] = useState(0);
  useDebugValue(count); // 在开发者工具中显示 count 的值
  return { count, setCount };
}

这些是React Hooks的一些基本用法。你可以根据需要在你的项目中使用它们来增强组件的功能和性能。