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

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>);