React Hook组件间传值及函数组件接收props替代方案咨询

一、App.jsx 传递 state 给 Form.jsx #

直接将App组件state中的data作为props传递给Form组件即可，以下是完整示例：

// App.jsx
import { useState } from 'react';
import Form from './Form';

function App() {
  const [data, setData] = useState({ name: '', email: '' });

  // 模拟触发数据更新的函数
  const update = () => {
    setData({ name: 'Marshmello', email: 'marshmello@example.com' });
  };

  return (
    <div className="app-container">
      <button onClick={update}>更新表单数据</button>
      {/* 将state中的data以formData为props名传递给Form */}
      <Form formData={data} />
    </div>
  );
}

export default App;

二、函数式组件替代 componentWillReceiveProps 的方案 #

类组件的componentWillReceiveProps核心作用是监听props变化并执行对应逻辑，函数式组件中通过useEffect钩子配合依赖数组就能实现等价功能，且更灵活精准。

1. 监听指定props变化（常用场景） #

如果只需要监听特定props（比如Form组件的formData），直接将该props放入useEffect的依赖数组，当props变化时自动执行回调：

// Form.jsx
import { useEffect } from 'react';

function Form({ formData }) {
  // 监听formData变化，替代componentWillReceiveProps
  useEffect(() => {
    // 这里写入原componentWillReceiveProps中的业务逻辑
    // 比如同步props到组件内部state、发起校验请求等
    console.log('收到新的表单数据:', formData);
  }, [formData]); // 仅当formData变化时触发回调

  return (
    <div className="form-container">
      <input type="text" value={formData.name} placeholder="请输入姓名" />
      <input type="email" value={formData.email} placeholder="请输入邮箱" />
    </div>
  );
}

export default Form;

2. 对比新旧props执行逻辑 #

如果需要像componentWillReceiveProps一样对比新旧props的值再执行逻辑，可以用useRef保存上一次的props状态：

// Form.jsx
import { useEffect, useRef } from 'react';

function Form({ formData }) {
  // 用ref保存上一次的formData
  const prevFormDataRef = useRef();

  useEffect(() => {
    const prevFormData = prevFormDataRef.current;
    // 对比新旧props，仅当name字段变化时执行逻辑
    if (prevFormData && prevFormData.name !== formData.name) {
      console.log('姓名字段更新:', formData.name);
      // 执行对应业务操作，比如重置邮箱输入框
    }
    // 更新ref为当前props，供下一次对比使用
    prevFormDataRef.current = formData;
  }, [formData]);

  return (
    <div className="form-container">
      <input type="text" value={formData.name} placeholder="请输入姓名" />
      <input type="email" value={formData.email} placeholder="请输入邮箱" />
    </div>
  );
}

export default Form;

注意事项 #

• 避免监听所有props（比如将Object.values(props)放入依赖数组），这种方式会导致组件频繁触发不必要的重渲染，建议始终精准监听需要的props。
• useEffect的回调在组件挂载时也会执行一次，如果需要仅在props更新时执行（排除首次挂载），可以通过prevFormDataRef.current是否存在来判断：

useEffect(() => {
  const prevFormData = prevFormDataRef.current;
  // 排除首次挂载，仅在props更新时执行
  if (prevFormData) {
    console.log('表单数据更新:', formData);
  }
  prevFormDataRef.current = formData;
}, [formData]);

内容的提问来源于stack exchange，提问作者Marshmello