React 不通过 ref 调用子组件函数的两种方式

方式一

子组件 watch 某属性的变动。

复杂点的情况，父组件要拿子组件函数调用的返回值。父组件要额外传个回调，在函数调用后，调用那回调。
流程图 todo
代码todo

方式二

父组件传入一个对象做为调用子组件方法的代理对象。子组件和该对象产生关联关系。类似 ant design 的 Form 的写法。

import { Form } from 'antd'
const [form] = Form.useForm();
// 触发验证
form.validateFields()
<Form form={form}>...</Form>

子组件里可能的实现是这样的：

({form}) => {
  const validateFields = ...
  useEffect(() => {
    // 绑定关联关系
    form.init(validateFields)
  }, [form])
}

form 里面可能这么写

class Form {
  init(validateFields) {
    this.doValidateFields = validateFields
  }
  validateFields () {
    this.doValidateFields?.()
  }
}