react--常见hook

useState:

• 用于在函数组件中添加状态。
• 示例：

import React, { useState } from 'react';

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

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

useEffect:

• 用于在函数组件中执行副作用操作，如数据获取、订阅等。
• 示例：

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

function ComponentWithEffect() {
  useEffect(() => {
    // 执行一些副作用操作

    return () => {
      // 在组件卸载时清除副作用
      // 例如取消订阅、清除定时器等
    };
  }, []); // 依赖为空数组，表示只在组件挂载时执行一次，依赖项有值，依赖项有变化则触发

  return <p>Component with effect</p>;
}

useMemo:

• 用于在渲染过程中对计算昂贵的值进行记忆化，以提高性能。
• 示例：

import React, { useMemo } from 'react';

function MemoizedComponent({ a, b }) {
  const result = useMemo(() => {
    // 执行一些计算
    return a + b;
  }, [a, b]); // 依赖数组，只有当 a 或 b 改变时才重新计算

  return <p>Result: {result}</p>;
}

useRef:

• 创建一个可变的 ref 对象，用于保存组件中的可变值。
• 示例：

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const focusInput = () => {
    inputEl.current.focus();
  };

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

useCallback:

• 用于在组件重新渲染时，缓存回调函数。
• 示例：

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

function Counter() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

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