使用和不使用构造函数将函数传递给状态的差异

Question

我正在学习 React 的 Context 并且我正在查看的材料基本上使用了一个构造函数，我试着想象一下我是否可以在没有构造函数的情况下做到这一点，这就是我想出的可行方法。但是在这个过程中我意识到我对几个关键概念没有完全理解，工作代码基本上只是反复试验的结果！

以下是我所知道的：

• 不需要在构造函数中使用bind(this)on toggleName，因为它是使用箭头函数设置的。

这是我需要解释的：

• 为什么构造函数使用函数引用，而无构造函数状态设置使用函数调用？

• 为什么无构造函数状态设置需要一个额外的箭头函数以及函数调用？

我知道我在 App 组件中设置了两次状态，这是为了展示两种不同的方法。

提供者组件：

const UserData = React.createContext();

class App extends Component {

  // classic approach

  constructor(props) {

    super(props);

    this.state = {

      name: 'Rick',

      toggleName: this.toggleName

    };

  }

   // alternate approach

   state = {

     name: 'Rick',

     toggleName: () => this.toggleName()

   };

  toggleName = () => {

    this.setState(state => ({

      name: state.name === 'Rick' ? 'Morty' : 'Rick'

    }));

  };

  render() {

    return (

      <UserData.Provider value={this.state}>

        {/* ... rest of code */}

      </UserData.Provider>

    );

  }

}

和消费者组件：

const ConsumerComponent = () => (

  <UserData.Consumer>

    {({ name, toggleName }) => (

      <div onClick={toggleName}>

        {name}

      </div>

    )}

  </UserData.Consumer>

);