Javascript 使用构造函数和不使用构造函数将函数传递到状态的区别

我在学习React的上下文，我在看的材料基本上都使用了构造函数，我试着想象一下，看我是否可以不用构造函数来做，下面是我想到的一些有用的方法。但在这个过程中，我意识到我对几个关键概念没有很好的理解，工作代码基本上只是反复试验的结果

以下是我所知道的：

• 无需在构造函数中的

  toggleName

  上使用

  bind（this）

  ，因为它是使用箭头函数设置的

以下是我需要解释的：

• 为什么构造函数使用函数引用，而无构造函数状态设置使用函数调用
• 为什么“无构造函数状态”设置需要在函数调用的同时添加一个箭头函数

我知道我已经在应用程序组件中设置了两次状态，这是为了显示两种不同的方法。

提供程序组件：

constuserdata=React.createContext（）；
类应用程序扩展组件{
//经典方法
建造师（道具）{
超级（道具）；
此.state={
名字：'瑞克'，
toggleName：这个
};
}
//替代方法
状态={
名字：'瑞克'，
toggleName:（）=>this.toggleName（）
};
toggleName=（）=>{
this.setState（state=>({
name:state.name=='Rick'？'Morty'：'Rick'
}));
};
render（）{
返回(
{/*…代码的其余部分*/}
);
}
}

以及消费者部分：

const ConsumerComponent=（）=>(
{（{name，toggleName}）=>(
{name}
)}
);

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

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

类应用程序扩展组件{
toggleName=（）=>{
this.setState（state=>({
name:state.name=='Rick'？'Morty'：'Rick'
}));
};
//替代方法
状态={
名字：'瑞克'，
toggleName:this.toggleName//现在它已初始化
};
render（）{
返回(
{/*…代码的其余部分*/}
);
}
}

---

您的替代方法是否需要包装功能？我很确定如果你只是做了

state={toggleName:this.toggleName}

，它会起作用，因为你确实是出于好奇而使用了一个箭头函数，为什么你想把你的方法放在state上？@azium我一开始是这么想的，但是当我检查state（chrome React扩展）时，toggleName会消失，没有任何错误，我不知道发生了什么事！这与我不理解“this”是什么有关，因为只要我把

state={toggleName:'this.toggleName'}

放在单引号中，意思是把函数ref放在一个字符串中，toggleName就会在state中重新出现@ChaimFriedman这是一个很好的问题，所以是的，我可以选择做

，但我看到的材料是把它放在状态中，所以我也做了同样的事情，这不是重点，因为所有这些方法都有效，我仍然不完全理解它们为什么会这样工作：）@ChaimFriedman不用担心，我忘了提到不鼓励像这样在提供者内部动态创建对象，因此传递state对象是最好的。这是因为您不希望所有子使用者组件每次都与父级一起重新渲染。