useEffect_React.JS基础教程

React中的Hook是一种新的特性，它可以让你在函数组件中使用状态(state)和其他React特性。其中一个常用的Hook是useEffect，它可以让你在函数组件中执行副作用操作(如数据获取、订阅、手动修改DOM等)。

useEffect的基本用法是在函数组件中调用它，并传入一个回调函数和一个依赖数组。当函数组件渲染时，React会执行这个回调函数。如果依赖数组发生变化，React会重新执行这个回调函数。

下面是一个简单的例子，演示如何使用useEffect来实现数据获取和订阅：

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

function App() {
  const [data, setData] = useState(null);

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

    fetchData();

    const subscription = subscribeToDataChanges(() => {
      fetchData();
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []); // 依赖数组为空，表示仅在组件挂载和卸载时执行

  return (
    <div>
      {data ? (
        <div>
          <h1>Data:</h1>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default App;

在上面的例子中，useEffect用于在组件挂载时获取数据并订阅数据更改。当组件卸载时，我们清理订阅。

除了在组件挂载和卸载时执行操作外，还可以使用useEffect来处理其他副作用操作，如在props或state变化时更新数据、手动修改DOM等。

需要注意的是，useEffect中的回调函数是异步执行的，所以在回调函数中使用的state和props可能会有延迟。同时，React会在浏览器绘制之后才执行useEffect中的回调函数，以确保操作不会阻塞页面渲染。

希望这个简单的教程能够帮助你了解React的Hook和useEffect的基本用法。如果有任何问题，请随时提出。