React函数组件：如何修改父组件状态并实现即时渲染？

在React函数组件中，子组件不能直接修改父组件传递的props，这是React单向数据流的核心规则。要实现子组件修改数据后页面即时渲染，核心是通过父组件传递回调函数，让子组件调用该函数触发父组件的state更新，从而带动整个组件树的重渲染。

具体实现代码 #

父组件（file1）

定义状态及更新函数，并将更新函数作为props传给子组件：

// file1: 父组件
import React, { useState, useCallback } from 'react';
import SecondComponent from './file2';

const ParentComponent = () => {
  // 初始化父组件状态
  const [var1, setVar1] = useState(0);
  const [var2, setVar2] = useState(1);

  // 定义供子组件调用的状态更新函数，用useCallback优化避免频繁创建
  const updateParentState = useCallback((newVar1, newVar2) => {
    setVar1(newVar1);
    setVar2(newVar2);
  }, []);

  return (
    <div>
      <p>当前值：var1={var1}, var2={var2}</p>
      {/* 传递状态和更新函数给子组件 */}
      <SecondComponent x={var1} y={var2} updateState={updateParentState} />
    </div>
  );
};

export default ParentComponent;

子组件（file2）

接收父组件的props，在需要修改数据时调用回调函数触发父组件状态更新：

// file2: 子组件
import React from 'react';

const SecondComponent = ({ x, y, updateState }) => {
  // 模拟修改x和y的操作逻辑
  const handleModifyValues = () => {
    // 计算新的x、y值
    const newX = x + 2;
    const newY = y * 3;
    // 调用父组件传递的回调函数，更新父组件状态
    updateState(newX, newY);
  };

  return (
    <button onClick={handleModifyValues}>修改并更新父组件状态</button>
  );
};

export default SecondComponent;

核心原理 #

React的重渲染触发条件是组件自身state更新或接收的props发生变化。子组件通过调用父组件的updateState函数，触发父组件的setVar1/setVar2更新state，父组件会自动重渲染，并将新的var1/var2传递给子组件，子组件也会随之更新，实现页面即时渲染。

常见误区提醒 #

• 禁止直接修改props：props是只读的，直接修改（如x = newX）不会触发React的重渲染机制，页面无法同步更新。
• 回调函数优化：如果父组件频繁重渲染，可用useCallback包裹回调函数，避免子组件不必要的重渲染。

内容的提问来源于stack exchange，提问作者my compiler is a liar