React父组件状态变更时调用子组件函数如何避免useEffect频繁触发

你目前遇到的effect频繁触发问题，核心原因是通过状态变更作为副作用触发源的实现方式本身就容易被无关的状态更新影响，以下是两种可直接落地的优化方案：

方案1：通过ref直接调用子组件方法（优先推荐） #

该方案完全不需要依赖状态监听逻辑，父组件在触发对应事件时直接调用子组件暴露的方法，从根源上避免多余触发：

• 实现步骤：
  1. 子组件通过useImperativeHandle + forwardRef将保存数据的方法暴露给父组件
  2. 父组件创建ref绑定到子组件实例
  3. 父组件的mouseup事件逻辑中，显式调用子组件的保存方法即可，只会执行一次
• 代码示例：
  子组件代码：

  import { forwardRef, useImperativeHandle } from 'react'
  const DrawChild = forwardRef((props, ref) => {
    const saveDrawData = () => {
      // 此处编写向数据库保存数据的逻辑，仅会被显式调用一次
    }
    // 对外暴露可调用的方法
    useImperativeHandle(ref, () => ({
      saveData: saveDrawData
    }))
    return <div>绘制区域内容</div>
  })
  

  父组件代码：

  import { useRef, useState } from 'react'
  const FullScreenHandler = () => {
    const [drawing, setDrawing] = useState(false)
    const childRef = useRef(null)
    const handleMouseDown = () => setDrawing(true)
    const handleMouseUp = () => {
      setDrawing(false)
      // 直接调用子组件保存方法
      childRef.current?.saveData()
    }
    return (
      <div style={{width: '100vw', height: '100vh'}} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
        <DrawChild ref={childRef} />
      </div>
    )
  }
  

方案2：useEffect增加边界判断（适合无法修改父组件逻辑的场景） #

如果必须保留通过父组件状态传递的实现方式，可通过ref存储上一次的drawing状态，仅在状态符合true转false的边界时执行保存逻辑：

import { useRef, useEffect } from 'react'
const DrawChild = ({ drawing }) => {
  // 存储上一次的drawing状态
  const prevDrawingRef = useRef(drawing)
  useEffect(() => {
    // 仅当drawing从true切换为false时执行保存
    if (prevDrawingRef.current === true && drawing === false) {
      // 执行保存数据逻辑
      saveToDatabase()
    }
    // 更新状态缓存
    prevDrawingRef.current = drawing
  }, [drawing])
}

方案对比 #

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