tutorials/react_hooks

React Hooks Effect 教程

React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写类的情况下使用 state 和其他 React 特性。本教程将介绍 React Hooks 中的 Effect Hook。

什么是 Effect Hook？

Effect Hook 允许你在函数组件中执行副作用操作，例如数据获取、订阅或手动更改 DOM。它类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法。

使用 Effect Hook

以下是一个使用 Effect Hook 来获取数据的示例：

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组表示这个 effect 只在组件挂载时运行一次

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

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

图片示例

这里是一个 React Hooks 的图片示例：

tutorials/react_hooks_effect

什么是 Effect Hook？

使用 Effect Hook

图片示例

更多学习资源