react中的事件和This

构造函数中绑定

主要是在类组件内使用，在构造方法内绑定和this 绑定，减少数据的多次产生，避免重复创建函数，绑定稳定，多使用在大型项目

    constructor(props) {
        super(props);
        this.handleClick1 = this.handleClick1.bind(this);
    }

类属性箭头函数

 // 方法2：类属性箭头函数
    handleClick2 = () => {
        this.setState({});
    }

不会多次创建函数，减少函数创建的开支。自动绑定当前组件this，this指向他的父类，适用于React开发。

普通函数

写法快捷易懂，传参数简单，适用于简单组件，如tab item 等，每次都会渲染新的函数，this执行当前实例化的对象，

    // 方法3：render中的箭头函数
    handleClick3() {
        this.setState({});
    }
    
    
          <Table.Column
            align="center"
            title="状态"
            dataIndex="collectState"
            key="collectState"
            width={120}
            render={(collectState) =>
              handleClick3() 
            }
          />

useCallback 和直接函数的区别

// 1. 普通函数 - 每次组件重渲染都会创建新函数
const normalFunction = () => {
    console.log("I am normal");
};

// 2. useCallback - 只在依赖项改变时才创建新函数
const memoizedFunction = useCallback(() => {
    console.log("I am memoized");
}, []);  // 空依赖数组

• 普通函数： 每次渲染都创建新的,但内存使用较少,适用于本组件内的函数创建
• useCallback：仅依赖项变化时创建，内存使用较多，函数常存在内存内，适用于需要传递函数的场景，组件之间的callback