React中父组件执行子组件传入的回调函数是否为合理开发实践？

这种父组件执行子组件传入回调的模式在简单场景下可正常运行，但并非社区推荐的通用最佳实践，具体分析如下：

该写法的适用场景与优势 #

• 逻辑实现简单，无需额外改造状态管理，对于小型项目、一次性页面、逻辑不会后续迭代的场景，完全可以正常使用，不会出现功能问题
• 异步流程的逻辑链路直观，父组件完成提交操作后直接触发回调，开发者很容易梳理清楚执行顺序

该写法存在的问题 #

• 组件耦合度过高：父组件和子组件的逻辑强绑定，父组件必须感知到要执行传入的第二个回调参数，一旦父组件后续迭代修改了handleSubmit逻辑漏调回调，子组件的重置功能会直接失效；同时子组件复用到其他父组件时，也需要新父组件兼容回调参数的处理，复用性大幅降低
• 违反单向数据流原则：React的设计理念是单向数据流，状态由上层组件向下传递，事件由下层组件向上触发，该写法相当于把子组件内部方法的执行权交给了父组件，数据流变成了双向依赖，后续逻辑复杂后很难维护和调试

更推荐的实现方案 #

这里提供两种社区常用的解耦实现方式：

方案1：状态提升（最通用） #

把表单状态放到父组件管理，子组件只负责渲染和事件触发，提交完成后父组件直接更新状态即可实现表单清空，全程单向数据流：

// 父组件
function Parent() {
  const [inputValue, setInputValue] = React.useState('');

  const handleSubmit = async (values) => {
    // 执行异步提交逻辑
    await new Promise(resolve => setTimeout(resolve, 1000));
    // 直接更新状态，子组件自动清空输入框
    setInputValue('');
  };

  return (
    <Child 
      inputValue={inputValue}
      onInputChange={setInputValue}
      onHandleSubmit={handleSubmit} 
    />
  );
}

// 子组件
function Child(props) {
  const handleSubmit = event => {
    event.preventDefault();
    props.onHandleSubmit(props.inputValue);
  };

  const handleChange = event => {
    props.onInputChange(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name :
        <input type="text" value={props.inputValue} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

方案2：父组件返回Promise（适合不想动状态管理的场景） #

父组件的提交方法执行完异步逻辑后返回Promise，子组件自行等待异步完成后调用内部的重置方法，父组件完全不需要感知子组件的后续逻辑，彻底解耦：

// 父组件
const handleSubmit = async (values) => {
  // 执行异步提交逻辑
  await new Promise(resolve => setTimeout(resolve, 1000));
  // 直接返回执行结果，不需要处理回调
  return { success: true };
};

// 子组件
const handleSubmit = async event => {
  event.preventDefault();
  const submitResult = await props.onHandleSubmit(inputValue);
  if (submitResult.success) {
    // 子组件自行控制重置逻辑，不依赖父组件调用
    resetInput();
  }
};

总结 #

如果你的项目规模很小、组件不会被复用、逻辑也没有后续迭代的计划，原来的写法完全可以正常运行。但如果是需要长期维护的中大型项目，更推荐使用上面两种更符合React设计理念的实现方案，可维护性和复用性都会好很多。

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