注意事项

1. 事件处理函数：事件处理函数应该是一个函数引用，而不是函数调用。即不要加括号：

2. 传递参数：如果需要在事件处理函数中传递参数，可以使用箭头函数或 bind 方法：
关于箭头函数
1. 箭头函数更简洁，适合小规模应用或不需要频繁重新渲染的场景
2. 箭头函数写在JSX中会在每次渲染时创建一个新函数，可能会有轻微的性能影响，通常只有在有大量列表或高频率更新时才需特别关注。
箭头函数的基本用法
• 箭头函数（Arrow Functions）是ES6引入的一种更简洁的函数写法，主要用于简化代码，并且有一些独特的特性，比如不绑定自己的 this 值
• 基本语法
箭头函数的基本语法形式如下：
当函数体只有一行返回值时，可以进一步简化为：
• 如果只有一个参数，可以省略圆括号 ()：
• 如果没有参数，需要加上空的 ()：
[补充]表达式和语句的区别(更深的情况需要了解编译原理了)
1. 定义
• 表达式（Expression）：
• 表达式是任何能产生一个值的代码片段。
• 表达式可以出现在需要值的地方，例如赋值、条件判断等。
• 语句（Statement）：
• 语句是执行某个操作的代码块，通常用于控制程序的流程。
• 语句不直接产生值，而是完成某个动作或指令。
2. 特性
• 表达式的特性：
• 产生值：表达式总是返回一个值，可以是数字、字符串、布尔值、对象等。
• 可嵌套：表达式可以嵌套在其他表达式中，形成更复杂的计算。
• 可用在赋值中：表达式的结果可以直接赋值给变量。
• 语句的特性：
• 执行操作：语句通常执行某种操作，而不是返回一个值。
• 控制结构：语句可以用来控制程序的执行流程，例如条件语句、循环语句等。
• 不产生值：虽然语句可能包含表达式，但语句本身并不返回任何有意义的值。
3. 示例
表达式示例
• 基本数学表达式：
• 函数调用：
• 条件表达式（三元运算符）：
在以上例子中，所有的代码片段都是表达式，因为它们都计算并返回了一个值。
语句示例
• 变量声明语句：
• 条件语句：
• 循环语句：
在这些例子中，所有的代码片段都是语句，因为它们执行某个操作，而不是返回值。
4. 如何在 JavaScript 中使用
• 表达式可以出现在任何需要值的地方：
• 例如，作为函数参数、赋值、条件判断等。
• 语句用于控制程序流：
• 例如，定义逻辑条件、循环迭代、处理错误等。
函数调用在 JavaScript 中可以既作为表达式，也可以作为语句，这取决于如何使用它。让我们更详细地探讨这个概念。
• 函数调用作为表达式
当函数被调用并用于计算一个值或作为其他表达式的一部分时，它被视为表达式。此时，函数的返回值是一个有意义的结果，可以用于赋值或其他计算中。
示例：
在这里，square(5) 被用作一个表达式，其返回值 25 被赋值给变量 result。
• 函数调用作为语句
当函数被调用以执行某些操作（例如打印输出、修改状态等），而不关注其返回值时，它被视为语句。在这种情况下，函数的调用只是为了执行该操作。
示例：
在这里，greet() 被用作语句，它执行 console.log("Hello!")，但我们并不关心 greet() 的返回值（它是 undefined）。
3. 结合使用
在复杂的代码中，函数调用可以同时作为表达式和语句，取决于上下文。例如，可以在 if 语句中调用一个函数，如果函数返回布尔值，则可以用作条件判断：
示例：
在这个例子中，isEven(4) 是一个表达式，它的返回值 true 被用作 if 语句的条件。
4. 总结
• 作为表达式：当函数调用用于计算一个值，或作为其他表达式的一部分时，它是表达式。例如：const result = square(5);
• 作为语句：当函数调用仅用于执行某些操作，而不关心返回值时，它是语句。例如：greet();
5. 总结
• 表达式总是返回一个值，可以在任何需要值的地方使用。
• 语句执行某种操作，不直接返回值，主要用于控制程序的流程。
理解这两者之间的区别有助于你在编写和阅读代码时，更清楚地知道代码的意图和执行方式。
特性和注意事项
1. this的绑定
箭头函数和普通函数最大的不同在于：箭头函数不会创建自己的 this，它会继承外层作用域中的 this。这个特性非常有用，可以避免在回调函数中手动绑定 this。
示例：
上面的例子中，this 不会指向 Counter 类的实例。如果用箭头函数来定义 setTimeout 的回调，this 会自动指向外层的实例：
2. 简化回调函数
箭头函数通常用于回调函数中，使代码更加简洁。常见场景包括数组的 map、filter 和 reduce 等方法：
3. 不绑定 arguments 对象
箭头函数没有 arguments 对象。如果需要访问参数，可以用剩余参数（rest parameter）来代替：
4. 不支持 new 关键字
箭头函数不能用作构造函数，不能与 new 关键字一起使用，否则会报错。因为箭头函数没有自己的 this，所以无法作为构造函数实例化对象。
5. 不支持 prototype 属性
由于箭头函数没有 prototype 属性，不能作为构造函数来生成原型对象。一般来说，如果函数需要构造一个对象或提供原型方法，不适合用箭头函数。
适用场景
• 回调函数：如事件监听、数组操作、Promise 等异步操作。
• 保持 this 绑定：在需要使用外层 this 的情况下，可以用箭头函数避免手动绑定。
• 简化短小函数：箭头函数语法简洁，适合定义简单逻辑的函数。
更多了解
‣
关于bind
bind 方法可以预先绑定参数，从而在事件触发时传递给事件处理函数：
解释：
• this.handleClick.bind(this, param1, param2) 使用 bind 方法创建了一个新的函数，这个函数的第一个参数 this 是组件实例的上下文，后面的参数 param1 和 param2 是需要传递的自定义参数。
• 这样当 onClick 触发时，绑定的函数会自动传递这些参数给 handleClick。
注意：
• bind 会立即返回一个绑定了 this 和参数的新函数，所以每次渲染时，这个绑定动作都会重新进行，可能会影响性能。为了优化性能，你可以在构造函数中绑定事件，避免每次渲染重复绑定。
• 复杂场景：在构造函数中预先使用 bind 更有效率，适合需要高性能的场景

3. 事件对象：React 会自动将事件对象传递给事件处理函数，允许你访问事件的属性：

4. 事件对象+参数都要:在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应.

5. 合成事件：React 使用合成事件（Synthetic Events），这是对浏览器原生事件的封装，提供了跨浏览器的一致性。

6. 清理事件：在类组件中，如果在 componentDidMount 或其他生命周期方法中添加事件监听器，请确保在 componentWillUnmount 中清理它们。