react 常用的hook使用举例

React 提供了许多内置的 Hook，用于在函数组件中添加状态管理和副作用等特性。以下是一些常用的 Hook 及其用法示例：

1. useState

useState 用于在函数组件中添加状态。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
};

2. useEffect

useEffect 用于在函数组件中执行副作用操作，如数据获取、订阅或手动更改 React 组件中的 DOM。

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);
    return () => clearInterval(interval); // 清理函数
  }, []); // 空数组表示仅在组件挂载和卸载时运行

  return <div>计时: {seconds} 秒</div>;
};

3. useContext

useContext 用于在函数组件中订阅 React 的上下文。

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

const ThemedButton = () => {
  const theme = useContext(ThemeContext);
  return <button>当前主题: {theme}</button>;
};

const App = () => (
  <ThemeContext.Provider value="dark">
    <ThemedButton />
  </ThemeContext.Provider>
);

4. useReducer

useReducer 用于在函数组件中管理包含多个子值的复杂状态逻辑。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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();
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>计数: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>增加</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>减少</button>
    </div>
  );
};

5. useCallback

useCallback 返回一个记忆化的回调函数。

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

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={increment}>增加</button>
    </div>
  );
};

6. useMemo

useMemo 返回一个记忆化的值。

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

const ExpensiveComponent = ({ num }) => {
  console.log('ExpensiveComponent 渲染');
  return <div>{num}</div>;
};

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

  const memoizedValue = useMemo(() => {
    console.log('计算 memoizedValue');
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>计数: {count}</p>
      <ExpensiveComponent num={memoizedValue} />
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
};

7. useRef

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

import React, { useRef } from 'react';

const InputComponent = () => {
  const inputEl = useRef(null);

  const focusInput = () => {
    if (inputEl.current) {
      inputEl.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={focusInput}>聚焦输入框</button>
    </div>
  );
};

8. useImperativeHandle

useImperativeHandle 用于在使用 ref 时自定义暴露给父组件的实例值。

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

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

const App = () => {
  const fancyInputRef = useRef();

  const handleClick = () => {
    fancyInputRef.current.focus();
  };

  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button onClick={handleClick}>聚焦输入框</button>
    </div>
  );
};

9. useLayoutEffect

useLayoutEffect 与 useEffect 相似，但它会在所有的 DOM 变更之后同步调用。

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

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

  useLayoutEffect(() => {
    console.log('DOM 更新完成');
  });

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
};

10. useDebugValue

useDebugValue 可以在 React 开发者工具中显示自定义的 label，以便于调试。

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useDebugValue(seconds);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>计时: {seconds} 秒</div>;
};

这些 Hook 为函数组件提供了强大的功能，使得在函数组件中管理状态和副作用变得更加简单和直观。通过结合使用这些 Hook，你可以构建复杂的 React 应用程序。