面试题：React Hooks在TypeScript下useEffect依赖数组的类型推断问题

设置依赖数组类型：
- 因为依赖是一个对象数组，我们需要使用React.DependencyList类型来正确定义依赖数组。由于对象可能包含不同的属性，为了确保在对象属性变化时能触发副作用，我们可以将对象数组进行深度比较。在TypeScript中，可以使用DeepReadonly类型来确保依赖数组是只读的，避免意外修改导致的问题。
- 假设对象数组中的对象有一个特定的属性，比如id属性，我们希望在id属性变化时触发副作用。我们可以使用useMemo来创建一个稳定的依赖数组，数组中的对象属性使用DeepReadonly处理。
示例代码：

import React, { useEffect, useMemo } from'react';
import { DeepReadonly } from 'type - script';

interface MyObject {
    id: number;
    name: string;
}

const MyComponent: React.FC = () => {
    const myArray: MyObject[] = [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' }
    ];

    const stableDependency = useMemo(() => myArray.map((obj) => ({...obj })) as DeepReadonly<MyObject[]>, [myArray]);

    useEffect(() => {
        // 这里的副作用代码
        console.log('副作用触发，依赖数组中的对象属性发生变化');
    }, stableDependency);

    return (
        <div>
            {/* 组件内容 */}
        </div>
    );
};

export default MyComponent;

在上述代码中：

首先定义了MyObject接口，描述了对象的结构。
然后在组件内创建了myArray对象数组。
使用useMemo创建了stableDependency，它是一个稳定的依赖数组，每次myArray变化时会重新计算，并且使用DeepReadonly确保其只读。
useEffect依赖于stableDependency，当stableDependency中对象的属性发生变化时，会触发副作用。

星途面试题库

面试题：React Hooks在TypeScript下useEffect依赖数组的类型推断问题

知识考点

面试题答案