时间戳

首页 > 解决方案 > 我什么时候需要在 reactJS 中使用 bind() 和 react native

reactjs - 我什么时候需要在 reactJS 中使用 bind() 和 react native

问题描述

所以当我创建一个类时，它通常看起来像这样

export default class SettingsIndex extends Component {

  constructor(props) {
    super(props);
    this.state = {
      testValue: 1,

    };
  }

myfunction(){
this.setstate({value: 2)
}
render(){
return(
........

问题1：老实说，我不确定什么时候真的需要构造函数，我的理解是每次类从父组件接收道具时我都需要声明构造函数，这是假设更正吗？

问题 2：myfunction()在某些类中看到它没有问题，但是在某些类中我得到一个错误，说 ```this.myfunction' 是未定义的，然后我需要像这样在构造函数中绑定（this）

this.myfunction= this.myfunction.bind(this);

我不确定为什么在某些类this中可以访问而不是其他类，知道吗？

标签： reactjsreact-nativejsx

解决方案

仅当您需要在第一次渲染之前运行一些初始化逻辑时才需要使用构造函数，例如初始化 refs、状态或绑定函数。你不需要构造函数只是因为你的组件正在接收道具，React 本身可以为你做道具转发

对于您的情况，您也可以通过适当的 babel 设置将 state 定义为类初始化程序并摆脱构造函数

export default class SettingsIndex extends Component {

    state = {
      testValue: 1,

    };

    myfunction(){
       this.setstate({value: 2)
    }

}

现在关于绑定的问题，你首先需要了解一个函数是如何接收它的context或this变量的。

函数调用的this参数作为调用函数的对象的引用被接收，除非函数被定义为箭头函数，在这种情况下，它this从其周围范围继承变量，或者通过使用调用显式覆盖，应用或绑定方法

例如，在 React 的生命周期方法中，this 变量已经指向类实例，调用函数 usingthis.myFunction()将导致 myFunction 接收类的上下文，因为调用它的对象是this。

另一方面，当您将函数分配给事件处理程序时，您正在分配对它的引用，并且当事件发生时，函数在窗口引用this上被调用，导致未定义，因此需要您使用arrow function或explicit bind提供适当的上下文.

查看此 SO 帖子以获取有关此关键字的更多详细信息

推荐阅读