react hook 动态渲染数据

使用React Hook动态渲染数据非常简单。在函数组件中，我们可以使用useState来创建状态变量，并且可以使用useEffect来监听状态变化并执行相应的操作。

首先，我们需要在组件中定义一个状态变量，可以使用useState来创建一个初始值为空的数组。例如：

const [data, setData] = useState([]);

接下来，我们可以使用useEffect来监听data的变化并执行相应的操作。在useEffect中，我们可以使用异步请求获取数据，并将数据设置到data状态变量中。例如：

useEffect(() => {
  // 使用异步请求获取数据
  fetchData().then((result) => {
    setData(result);
  });
}, []);

这样，当组件首次渲染时，useEffect会执行一次，调用fetchData函数获取数据并将其设置到data状态变量中。随后，每当data发生变化时，useEffect也会执行，例如在某个事件触发或某个状态变量发生变化时。

最后，我们可以在return中使用map方法遍历data数组，并渲染每个数据。例如：

return (
  <div>
    {data.map((item, index) => (
      <p key={index}>{item}</p>
    ))}
  </div>
);

这样，每当data中的数据发生变化时，组件会动态地重新渲染，并显示最新的数据。

综上所述，使用React Hook动态渲染数据非常简单。通过使用useState来创建状态变量，使用useEffect来监听状态变化并执行相应的操作，我们可以动态地渲染数据。