javascript - 使用和不使用构造函数将函数传递给状态的区别

Question

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

这是我所知道的:

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

这里是我需要解释的:

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

我知道我在 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>
);

Answer 1

在“替代”方法中需要包装函数的原因是因为您试图引用尚未初始化的内容。这是类“属性”不同于类“方法”的方式之一，类“方法”在构造函数运行时已经附加到类引用。只需更改语句的顺序即可使其工作:

class App extends Component {
  toggleName = () => {
    this.setState(state => ({
      name: state.name === 'Rick' ? 'Morty' : 'Rick'
    }));
  };

   // alternate approach
   state = {
     name: 'Rick',
     toggleName: this.toggleName // now it is initialized
   };


  render() {
    return (
      <UserData.Provider value={this.state}>
        {/* ... rest of code */}
      </UserData.Provider>
    );
  }
}

example