为何Airbnb风格指南强制ESLint规则react/function-component-definition？

你遇到的ESLint错误对应规则是react/function-component-definition，Airbnb的配置要求React组件使用函数声明或赋值给变量的普通函数表达式，而非箭头函数。背后的原因主要有这几点：

• 可读性与一致性：函数声明的写法更直观，一眼就能识别这是一个组件。箭头函数通常被用于回调函数、小型逻辑片段等场景，用在组件定义上会和这些常规用法混淆，在大型团队项目中，统一的写法能降低成员的认知成本。
• 函数提升特性：函数声明会被JavaScript引擎提升，意味着你可以在代码中先使用组件再定义它（虽然React开发中很少这么做，但这是语言特性带来的写法一致性）；而箭头函数作为变量赋值，必须先定义才能使用。
• 调试与测试便利性：函数声明有明确的名称，在浏览器调试的调用栈、错误信息中会直接显示组件名，方便定位问题；如果用匿名箭头函数赋值，调试时可能只会显示(anonymous)，增加排查难度。
• 风格历史延续：在React Hooks普及之前，函数组件就普遍采用函数声明的写法，Airbnb风格指南延续了这一传统，保持和类组件定义的一致性（类组件用class声明，函数组件用函数声明）。

修复示例 #

把箭头函数组件改成函数声明：

import React from 'react';
import { Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../firebase';
import { logIn } from '../features/authentication/authenticationSlice';

function LogInPage() {
  const dispatch = useDispatch();

  const handleSubmit = (event) => {
    event.preventDefault();
    const email = event.target[0].value;
    const password = event.target[1].value;
    const rememberMe = event.target[2].checked;

    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const expiryTime = Math.floor(new Date().getTime() / 1000.0) + 86400;
        const loginDetails = {
          accessToken: userCredential.user.accessToken,
          email: userCredential.user.email,
          name: userCredential.user.displayName,
          uid: userCredential.user.uid,
          expiryTime,
        };
        if (rememberMe) {
          localStorage.setItem('loginDetails', JSON.stringify(loginDetails));
        } else {
          sessionStorage.setItem('loginDetails', JSON.stringify(loginDetails));
        }
        dispatch(logIn({
          isLoggedIn: true,
          loginDetails,
          rememberMe
        }));
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
      });
  };

  return ( 
  <div className = "h-full w-full flex flex-col items-center justify-center gap-10">
    <h1 className = "text-xl font-bold" > Log In Page </h1>
    <form 
      className = "flex flex-col items-center gap-5"
      onSubmit = {handleSubmit} 
    >
      <input 
        className = "py-2 px-4 rounded w-80"
        label = "E-Mail Address"
        name = "eMailAddress"
        type = "text" 
      />
      <input 
        className = "py-2 px-4 rounded w-80"
        label = "Password"
        name = "password"
        type = "password" 
      />
      <div className = "flex flex-row gap-3" >
        <input 
          type = "checkbox"
          id = "RememberMe"
          name = "RememberMe"
          value = "RememberMe" 
        />
        <label htmlFor = "RememberMe" > Remember Me </label> 
      </div>
      <input 
        className = "bg-black text-white py-2 px-8 rounded"
        type = "submit"
        value = "Submit" 
      />
      <Link 
        className = "text-blue-600 underline"
        to = "/sign-up" 
      > 
        Sign Up 
      </Link> 
    </form> 
   </div>
  );
}

export default LogInPage;

或者使用普通函数表达式（Airbnb也接受这种写法）：

const LogInPage = function() {
  // ...组件逻辑
};

箭头函数确实能正常实现React组件，也属于主流写法之一，但Airbnb的规则核心是为了团队协作中的代码一致性和长期维护性。

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