17、React中useEffect钩子的使用场景与实践

React中useEffect钩子的使用场景与实践

在React开发中， useEffect 钩子是一个非常强大的工具，它可以帮助我们处理各种副作用，如数据获取、事件监听、定时器管理等。下面将详细介绍 useEffect 在不同场景下的使用方法。

1. 组件挂载时运行一次效果

假设我们要创建一个下拉组件，该组件从外部服务器加载数据并显示在下拉列表中。我们需要在组件挂载时加载这些数据，并且之后不再重复加载。

import { useState, useEffect } from 'react';

function RemoteDropdown() {
  const [options, setOptions] = useState([]);
  useEffect(
    () =>
      fetch('//www.swapi.tech/api/people')
        .then(res => res.json())
        .then(data => setOptions(data.results.map(({ name }) => name))),
    [],
  );
  return (
    <select>
      {options.map(option => (
        <option key={option}>{option}</option>
      ))}
    </select>
  );
}