React中useImperativeHandle适用场景及父组件调用子组件方法示例

你给出的场景下完全可以使用useImperativeHandle，这个方案是合理的。

你描述的场景中，UserPosts作为封装了帖子拉取、渲染逻辑的可复用组件，不需要把内部的请求方法、分页状态暴露给父组件，仅通过useImperativeHandle对外暴露必要的fetchNewPosts刷新方法，既保证了子组件逻辑的内聚性，也能满足父组件下拉刷新时同时触发用户信息、帖子列表更新的需求，不需要把帖子相关的逻辑提升到父组件导致代码冗余。

适用useImperativeHandle的典型场景 #

• 需要执行命令式操作，且无法通过props驱动实现：比如手动触发输入框聚焦/失焦、控制滚动组件滚动到指定位置、主动触发可复用列表的刷新、控制模态框的弹出收起这类操作
• 可复用组件需要对外暴露少数操作接口，同时不想暴露内部的完整实例、私有状态和方法，避免父组件随意操作子组件内部内容，降低组件耦合度
• 避免将组件内部的状态和逻辑不必要地提升到父组件，减少跨组件的状态传递复杂度

不推荐使用useImperativeHandle的场景 #

• 可以通过props驱动的交互优先用props：比如子组件的显示隐藏如果可以通过传入visible属性控制，就没必要额外暴露show/hide方法
• 不要暴露大量子组件内部的状态和方法，否则会导致父子组件耦合度过高，子组件的可维护性和复用性会大幅下降
• 不要用它替代必要的状态提升：如果父子组件需要共享大量业务状态，优先选择状态提升或者全局状态管理方案，不要通过ref调用方法来回修改状态

你示例代码的小修正 #

你贴的子组件代码中useImperativeHandle的语法有小问题，第二个参数需要是返回暴露对象的函数，修正后写法如下：

const UserPosts = forwardRef(({ userId }, ref) => {
  const { posts, isLoading, fetchNewPosts, fetchMoreOldPosts } = useFetchUserPosts(userId);

  useImperativeHandle(ref, () => ({
      fetchNewPosts,
  }));

  return <CardList data={posts} isLoading={isLoading} ... />;
});

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