React + TS +钩子在操作调度时出现问题

在使用React结合TypeScript以及钩子（Hooks）进行开发时，可能会遇到各种问题，特别是在操作调度（如使用useEffect、useState等）时。以下是一些常见问题及其解决方案：

基础概念

React Hooks 是React 16.8版本引入的新特性，允许函数组件具有类组件的状态和其他React特性，而无需编写类组件。

TypeScript 是一种静态类型检查器，为JavaScript添加了类型系统，有助于在编译阶段捕获错误。

常见问题及原因

状态更新延迟：
- 原因：React的状态更新是异步的，多次连续的状态更新可能会被合并成一次更新。

依赖数组问题：
- 原因：useEffect、useCallback等钩子的依赖数组如果设置不当，可能导致不必要的重新渲染或逻辑错误。
闭包陷阱：
- 原因：在钩子内部创建的函数可能会捕获旧的状态值，导致行为不符合预期。

解决方案示例

1. 状态更新延迟

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

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1); // 使用函数形式更新状态
    }, 1000);

    return () => clearInterval(timer); // 清理定时器
  }, []);

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

export default Counter;

2. 依赖数组问题

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

const DataFetching: React.FC = () => {
  const [data, setData] = useState<any>(null);
  const [id, setId] = useState(1);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${id}`);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [id]); // 确保id变化时重新获取数据

  return (
    <div>
      <button onClick={() => setId(id + 1)}>Fetch New Data</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataFetching;

3. 闭包陷阱

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

const CounterWithClosure: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let countRef = count; // 错误示例，这里会捕获到初始值
    const timer = setInterval(() => {
      console.log(countRef); // 这里始终打印初始值
    }, 1000);

    return () => clearInterval(timer);
  }, []); // 注意依赖数组为空

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

export default CounterWithClosure;

修正闭包陷阱：

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

const CounterWithRef: React.FC = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count; // 更新ref的值
  }, [count]);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(countRef.current); // 正确打印当前值
    }, 1000);

    return () => clearInterval(timer);
  }, []);

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

export default CounterWithRef;