在React函数组件中使用内联函数仍会引发性能问题吗？

我使用MUI等React库已有一段时间，每次查阅其文档时都会发现，几乎所有场景下，即使是执行简单的单条状态更新代码，官方也会定义单独的函数。

我曾了解过类组件中内联函数的使用逻辑，但类组件的渲染机制和现在主流的函数组件不同——类组件实例创建后，render函数可单独调用，仅重新渲染需要对比的DOM内容。

但在函数组件中，我认为只要函数定义在组件内部，不管是写在return语句上方还是内联在DOM元素上，每次渲染时都会被重新定义。如果我的认知有误，希望能得到指正。

两种写法示例 #

不使用内联函数的写法 #

import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function StateTextFields() {
  const [name, setName] = React.useState('Cat in the Hat');
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  return (
    <TextField
        id="outlined-uncontrolled"
        label="Uncontrolled"
        defaultValue="foo"
      />
  );
}

使用内联函数的写法 #

import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function StateTextFields() {
  const [name, setName] = React.useState('Cat in the Hat');

  return (
    <TextField
        id="outlined-name"
        label="Name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
  );
}

大型组件中的痛点 #

当编写包含多处事件处理器的大型组件时，这个问题会更突出：在return语句上方逐一定义单独函数，再在JSX中调用，会让代码更长、更杂乱；而直接在JSX里写内联事件处理器，代码更简洁，编写和理解起来都更轻松。

测试验证 #

为了理解执行流程，我写了两个测试组件：

预定义函数版本 #

import React, { useState } from "react";

const Test = () => {
  const [val, setVal] = useState(0);
  const inc = () => {
    console.log("Hi");
    setVal((val) => val + 1);
  };
  return (
    <>
      <br />
      <button onClick={inc}>Test alone</button>
      {console.log("Rendered")}
      <br />
    </>
  );
};

export default Test;

内联函数版本 #

import React, { useState } from "react";

const Test2 = () => {
  const [val, setVal] = useState(0);
  return (
    <>
      <button
        onClick={() => {
          console.log("Hi");
          setVal((val) => val + 1);
        }}
      >
        Test 2
      </button>
      {console.log("Rendered from test 2")}
    </>
  );
};

export default Test2;

测试后我并未发现两种写法存在性能差异，但内联函数写法的代码体验确实更好。

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