React Native传递回调函数为子组件Prop时的ESLint错误修复

错误原因 #

react/jsx-no-bind规则禁止在JSX props中传递每次渲染都会生成新引用的函数——这类函数会导致子组件触发不必要的重渲染，还可能引发闭包捕获旧值的问题。你的代码里，父组件的myHandler每次渲染都会重新创建，传递给子组件后触发了该规则。

具体修复步骤 #

1. 父组件用useCallback稳定函数引用 #

在父组件中，使用useCallback包裹myHandler，确保函数引用在依赖项不变时保持稳定：

import { useState, useCallback } from 'react';

const ParentComponent = () => {
  const [startTime, setStartTime] = useState(new Date());

  // useCallback缓存函数，依赖项为空（setStartTime是useState返回的稳定引用）
  const myHandler = useCallback(() => {
    const tn = new Date();
    setStartTime(tn);
  }, []);

  return (
    <ChildComponent myHandler={myHandler} />
  );
};

2. 子组件修正useCallback依赖并添加React.memo #

子组件的someAction中，useCallback的依赖数组缺少myHandler，这会导致闭包捕获旧的函数引用，同时违反ESLint的依赖检查规则。需要将myHandler加入依赖数组，并用React.memo包裹子组件以优化渲染：

import { useCallback, memo } from 'react';
import { Student } from './your-types-file'; // 替换为实际类型文件路径

interface Props {
  myHandler: (params: any) => any;
}

const ChildComponent = ({ myHandler }: Props) => {
  const someAction = useCallback(
    (studentId: Student['id']) => () => {
      navigation.push(STUDENTROUTE, { studentId });
      myHandler(studentId);
    },
    [navigation, myHandler] // 补充myHandler到依赖项
  );

  // 子组件渲染逻辑...
  return <div>...</div>;
};

// React.memo浅比较props，仅当props变化时重渲染子组件
export default memo(ChildComponent);

3. 临时方案：禁用单行规则（不推荐） #

如果暂时不需要性能优化，可在传递props的行添加注释禁用规则，但这只是权宜之计，不建议长期使用：

return (
  // eslint-disable-next-line react/jsx-no-bind
  <ChildComponent myHandler={myHandler} />
);

核心说明 #

• useCallback的作用是缓存函数引用，只有当依赖项变化时才会重新生成函数。
• React.memo配合useCallback能有效避免子组件因函数引用变化触发的不必要重渲染。
• 必须保证useCallback的依赖项完整，否则会出现闭包捕获旧状态/函数的问题。

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