如何避免在 ReactJS 中绑定？

在 ReactJs 中，当我们使用基于类的组件并希望在类方法中访问它时。这将需要绑定它。绑定 this 允许它访问类中的 state 和 setstate。

为了避免绑定的需要，我们在 ES6 中引入了箭头函数。使用箭头函数调用 this.setState 会导致避免使用 bind。当我们使用箭头函数时，它会起作用，原因如下：

它不会重新定义 this 的范围，因此我们不需要在类构造函数中绑定 this。
JavaScript 具有一流的函数，这意味着函数被视为数据。因此，可以将箭头函数分配给类属性。

让我们在 react 中创建一个应用程序，看看它是如何实现的：

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

项目结构：看起来像这样

项目结构

示例：通常当您想在类方法中访问 this 时，您需要将其绑定到您的方法，如下所示：

App.js

import React, { Component } from "react";
  
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ clicked: true });
  }
  render() {
    return (
      
        Click Me!
      
    );
  }
}

App.js

import React, { Component } from "react";
  
export default class App extends Component {
  state = { clicked: false };
  handleClick = () => this.setState({ clicked: true });
  render() {
    return Click Me!;
  }
}

为了从上面的代码中删除绑定语句，请更新您的App.js文件，例如 -

应用程序.js

import React, { Component } from "react";
  
export default class App extends Component {
  state = { clicked: false };
  handleClick = () => this.setState({ clicked: true });
  render() {
    return Click Me!;
  }
}

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：在上面的基于类的组件中，我们在句柄点击中使用了箭头函数。

输出