React 函数定义方式

1. React中支持多种函数定义方式，包括函数声明、箭头函数和匿名函数。
2. 函数声明使用function关键字，具有变量提升特性。
3. 箭头函数语法简洁，自动绑定this上下文，适合事件处理。
4. 匿名函数通常作为函数表达式使用，常用于回调函数。
5. 在React组件中，箭头函数和匿名函数常用于事件处理器和回调函数。
6. 箭头函数支持简写形式，当函数体只有一行时可省略return和大括号。
7. 箭头函数不能作为构造函数使用，没有arguments对象。
8. 匿名函数在React中常用于事件处理，但可能导致性能问题。

函数声明 (Function Declaration)
函数声明使用 function 关键字定义，可以直接调用：

 

// 函数声明

function handleClick() {

  console.log('函数声明被调用');

}

// 在组件中调用

export default function MyComponent() {

  return (

    <button onClick={handleClick}>

      点击我

    </button>

  );

}

 

箭头函数 (Arrow Function)
箭头函数使用 => 语法定义，可以作为变量赋值后调用：

// 匿名函数

const handleClick = function() {

  console.log('匿名函数被调用');

};

// 在组件中调用

export default function MyComponent() {

  return (

    <button onClick={handleClick}>

      点击我

    </button>

  );

}

匿名函数 (Anonymous Function)
匿名函数通常作为函数表达式定义，通过变量引用调用：

// 匿名函数

const handleClick = function() {

  console.log('匿名函数被调用');

};

// 在组件中调用

export default function MyComponent() {

  return (

    <button onClick={handleClick}>

      点击我

    </button>

  );

}

 

React 组件中的实际应用示例

import React, { useState } from 'react';

export default function FunctionExamples() {

  const [count, setCount] = useState(0);

 

  // 函数声明

  function increment() {

    setCount(count + 1);

  }

 

  // 箭头函数

  const decrement = () => {

    setCount(count - 1);

  };

 

  // 匿名函数

  const reset = function() {

    setCount(0);

  };

 

  return (

    <div>

      <p>计数: {count}</p>

      <button onClick={increment}>增加</button>

      <button onClick={decrement}>减少</button>

      <button onClick={reset}>重置</button>

    </div>

  );

}

在事件处理中的调用方式

// 函数声明

function handleClick() {

  console.log('点击事件');

}

// 箭头函数

const handleHover = () => {

  console.log('悬停事件');

};

// 匿名函数

const handleFocus = function() {

  console.log('聚焦事件');

};

// 在组件中使用

export default function MyComponent() {

  return (

    <div>

      <button onClick={handleClick}>点击</button>

      <button onMouseEnter={handleHover}>悬停</button>

      <input onFocus={handleFocus} />

    </div>

  );

}