¿Cómo evitar la vinculación mediante el uso de funciones de flecha en las devoluciones de llamada en ReactJS?

En los componentes basados ​​en la clase React, cuando usamos devoluciones de llamada del controlador de eventos, es muy importante prestar especial atención a la palabra clave ‘esto’. En estos casos, el contexto no está definido cuando se invoca la función de devolución de llamada, por eso tenemos que vincular el contexto de esto. Ahora bien, si vincular todos los métodos de cada clase es muy molesto. En lugar de vincular, podemos usar la función de flecha en línea ya que la función de flecha no tiene su propio valor de esto, usa el valor principal o público. Usando la función de flecha en línea, podemos deshacernos del molesto enlace de método cada vez y también el código se ve muy empaquetado y organizado.

Ejemplo 1: este ejemplo ilustra cómo usar las funciones de flecha en las devoluciones de llamada

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js: 

import React, { Component } from 'react'
 
class App extends Component {
  // Default props
  static defaultProps = {
    courseContent : [
      'JSX', 'React Props', 'React State', 'React Lifecycle Methods',
      'React Event Handlers', 'React Router', 'React Hooks', 'Readux',
      'React Context'
    ]
  }
   
  constructor(props){
    super(props)
     
    // Set initial state
    this.state = {msg : 'React Course', content:''}
  }
 
  // Return an unordered list of contents
  renderContent(){
    return (
      <ul>
        {/* map over all the contents and
            return some JSX for each  */}
        {this.props.courseContent.map(content => (
          <li>{content}</li>
        ))}
      </ul>
    )
  }
   
  render(){
    const button = !this.state.content &&
    <button
      // Arrow function in callback
      onClick={() => {
        // Update state
        this.setState({
          msg : 'Course Content',
          content : this.renderContent()
        })
      }}
    >
      Click here to know contents!
    </button>
    return (
      <div>
         
 
<p>{this.state.msg}</p>
 
 
         
 
<p>{this.state.content}</p>
 
 
        {button}
      </div>
    )
  }
}
 
export default App

Producción :

Ejemplo 2:

índice.js: 

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js: 

import React, { Component } from 'react'
 
class App extends Component{
  // Default props
  static defaultProps = {
    name : ['John', 'Alex', 'Bob']
  }
  constructor(props){
    super(props)
    // Nnitialize count state
    this.state = {msg : 'Hi There', count:0}
  }
 
  render(){
    return(
      <div>
        <h3>Greetings!</h3>    
         
 
<p>{this.state.msg}</p>
 
 
        <button
          // Arrow function in callback
          // does not required explicit binding
          onClick={() => {
            this.setState(st => (
              st.msg = `${st.msg}, ${this.props.name[st.count]}`,
              st.count += 1
            ))
          }}
        >
          Say greeting to employees!
        </button>
      </div>   
    ) 
  }
}
export default App

Producción :