如何在外部函数中访问React函数组件内部声明的变量

你遇到的未定义问题本质是JavaScript作用域规则限制：setQuery是FoodSearch组件内部通过useState声明的状态更新方法，history是组件内部通过useNavigate拿到的导航方法，二者都是组件函数作用域内的局部变量，定义在组件外部的函数根本访问不到这些值，自然会报未定义错误。

首先要纠正一个普遍的错误认知：组件每次渲染时重新定义内部函数的性能开销极小，绝大多数业务场景下完全可以忽略，根本不属于不良开发实践。React官方文档的所有示例都默认把事件处理函数写在组件内部，现代JS引擎创建函数的速度极快，这点开销和组件渲染本身的DOM计算、diff开销比起来完全不值一提。只有当你把函数作为props传递给经过React.memo优化的深层子组件时，才需要考虑函数引用变化带来的额外重渲染问题，普通场景完全不需要强行把函数挪到组件外部。

方案1：直接在组件内部定义函数（99%场景推荐） #

这是最符合React设计思路、可读性最高的写法，不需要做多余的“优化”：

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

function FoodSearch() {
  const [query, setQuery] = useState('');
  const navigate = useNavigate()

  function handleChange(e) {
    setQuery(e.target.value);
  }

  function handleClick(e) {
    navigate(`/food/${query}`);
  }

  return (
    <div>
      <h1>Search For A Food!</h1>
      <input
        type='text'
        placeholder='search for a food'
        value={query}
        onChange={handleChange}
      />
      <Link to={`/food/${query}`}>Go!</Link>
      <button onClick={handleClick}>Save New Food!</button>
    </div>
  );
}
export default FoodSearch;

如果后续确实需要做性能优化，避免函数引用变化导致子组件重渲染，直接用useCallback包裹内部函数即可，不需要把函数移出组件。

方案2：抽离函数到组件外部（仅适合多组件复用逻辑的场景） #

如果你需要把同一段处理逻辑复用到多个组件、必须把函数放到组件外部，只需要把函数依赖的组件内部值作为参数传入即可，注意在绑定事件时手动透传所有参数：

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

// 外部函数不直接依赖组件内部变量，所有需要的值通过参数传入
function handleChange(e, setQuery) {
  setQuery(e.target.value);
}

function handleClick(e, navigate, query) {
  navigate(`/food/${query}`);
}

function FoodSearch() {
  const [query, setQuery] = useState('');
  const navigate = useNavigate()

  return (
    <div>
      <h1>Search For A Food!</h1>
      <input
        type='text'
        placeholder='search for a food'
        value={query}
        onChange={(e) => handleChange(e, setQuery)}
      />
      <Link to={`/food/${query}`}>Go!</Link>
      <button onClick={(e) => handleClick(e, navigate, query)}>Save New Food!</button>
    </div>
  );
}
export default FoodSearch;

注意：这种写法不会带来任何性能提升，反而会增加代码维护成本，如果没有跨组件复用逻辑的需求，完全不要用这种写法。

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