react学习笔记7 useEffct

在 React 中，useEffect 是一个非常有用的 Hook，它让你可以在函数组件中执行副作用操作，比如数据获取、订阅或手动更改 DOM。在 TypeScript 中使用 useEffect 时，你需要确保类型正确且安全。 下面是一些关于如何在 TypeScript 中使用 useEffect 的示例：

1. 基础示例

这个示例展示了如何在组件挂载时执行一些操作，并在组件卸载时清理这些操作。

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

  useEffect(() => {
    // 在组件挂载时执行的操作
    console.log('Component mounted');
    
    // 清理操作
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 依赖数组为空意味着这个 effect 只会在组件挂载和卸载时执行一次
  


  useEffect(() => {
    // 在 count 改变时执行的操作
    console.log(`Count changed: ${count}`);

    // 如果需要清理操作，可以在这里添加
  }, [count]); // 依赖数组只包含 count，这意味着每当 count 改变时都会重新执行这个 effect

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

export default ExampleComponent;

2. 使用泛型

当你需要在 useEffect 内部访问组件的 props 或其他类型时，你可以使用泛型来增强类型安全性。

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

interface Props {
  initialCount: number;
}

function ExampleComponent({ initialCount }: Props) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    console.log(`Initial count is: ${initialCount}`);
  }, [initialCount]); // 注意这里依赖数组中包含 initialCount

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

export default ExampleComponent;

3. 使用 TypeScript 的类型断言

有时你可能需要在 useEffect 中访问某个类型的属性，而这个属性可能不存在于组件的 props 中。这时你可以使用类型断言来告诉 TypeScript 编译器你正在访问的属性是存在的。

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

interface Props {
  someProp?: string;
}

function ExampleComponent({ someProp }: Props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const customProp = someProp as string; // 类型断言
    console.log(`Custom prop: ${customProp}`);
  }, [someProp]); // 依赖数组中包含 someProp

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

export default ExampleComponent;

4. 使用 TypeScript 的类型别名

为了使你的代码更加清晰和易于维护，你可以使用类型别名来定义组件的 props 类型。

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

type Props = {
  initialCount: number;
};

function ExampleComponent({ initialCount }: Props) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    console.log(`Initial count is: ${initialCount}`);
  }, [initialCount]);

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

export default ExampleComponent;

5. 使用 useEffect 与外部库结合

假设你正在使用一个外部库，例如 axios，来处理 HTTP 请求，你可以结合使用 useEffect 来处理数据获取。

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

function ExampleComponent() {
  const [data, setData] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        setError('Failed to fetch data');
      }
    }

    fetchData();
  }, []); // 依赖数组为空意味着这个 effect 只会在组件挂载时执行一次

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default ExampleComponent;