React中为何局部变量无法传递给子组件？状态变量必要性解析

要搞懂这个问题，得先明白React函数组件的渲染逻辑和局部变量的特性：

局部变量的问题 #

函数组件每次执行（也就是渲染）时，内部的局部变量都会重新创建。API请求是异步操作，当请求完成、你更新局部变量的时候，组件的初始渲染已经完成了——而局部变量的更新不会触发组件重新渲染。

举个实际的代码例子：

function Parent() {
  let apiData = []; // 局部变量

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        apiData = data; // 异步更新局部变量
        console.log(apiData); // 这里能看到数据，因为是当前回调作用域里的变量
      });
  }, []);

  return <Child data={apiData} />;
}

初始渲染时，apiData是空数组，传给子组件Child的就是这个空值。当异步请求完成后，你虽然更新了apiData，但这个操作不会让Parent组件重新渲染，所以Child永远拿不到最新的API数据。而你在父组件控制台看到的正常数据，只是回调函数作用域里的那个局部变量，和渲染时传给子组件的不是同一个。

状态变量的作用 #

用useState声明的状态变量是React专门追踪的变量。当你调用状态的setter函数（比如setApiData）更新它时，React会立刻感知到状态变化，触发组件重新渲染。

重新渲染时，状态变量会持有最新的API数据，这时候传给子组件的就是更新后的值，子组件自然能拿到正确的数据。

正确的写法示例：

import { useState, useEffect } from 'react';

function Parent() {
  const [apiData, setApiData] = useState([]); // 状态变量

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        setApiData(data); // 更新状态，触发组件重新渲染
      });
  }, []);

  return <Child data={apiData} />;
}

核心总结 #

• 局部变量的更新不会触发React的重新渲染流程，子组件只能拿到组件首次渲染时的初始值
• 状态变量是React的核心机制之一，更新状态会触发组件重新渲染，让整个组件树（包括子组件）同步最新的数据
• 异步操作完成后，只有通过更新状态，才能让React感知到数据变化，进而更新视图

内容的提问来源于stack exchange，提问作者Gopikrishna K S