Javascript 为什么react native中未定义this.state？

我是react native、react.js和javascript的新手。我是安卓开发者，所以想给RN一个尝试

基本上，区别在于onPress上的

当toggle（）运行时，此代码显示“未定义”：

类装入器扩展组件{
建造师（道具）{
超级（道具）；
this.state={loading:false}；
}
切换（）{
console.log（this.state）；
//让state=this.state.loading；
log（“单击！”）
//this.setState（{loading:！state}）
}
render（）{
返回(
{this.props.text}
);
}
}

但这个代码是有效的：

class LoaderBtn extends Component {
    constructor(props) {
        super(props);
        this.state = { loading: false };
    }

    toggle() {
        console.log(this.state);
        // let state = this.state.loading;
        console.log("Clicked!")
        // this.setState({ loading: !state })
    }

    render() {
        return (
            <Button style={{ backgroundColor: '#468938' }} onPress={() => {this.toggle()}}>
                <Text>{this.props.text}</Text>
            </Button>
        );
    }
}

类装入器扩展组件{
建造师（道具）{
超级（道具）；
this.state={loading:false}；
}
切换（）{
console.log（this.state）；
//让state=this.state.loading；
log（“单击！”）
//this.setState（{loading:！state}）
}
render（）{
返回(
{this.toggle（）}}>
{this.props.text}
);
}
}

你能解释一下区别吗

在Java/Kotlin中，我们有方法引用，如果签名相同，基本上它会传递函数，比如
onPress=（）=>{}
和
toggle=（）=>{}

但是在JS中它不起作用：（
我认为发生的事情是范围问题。当您使用
onPress={this.toggle}
时，这不是您在切换函数中所期望的。但是，箭头函数表现出不同的行为并自动绑定到
this
。您也可以使用
onPress={this.toggle.bind（this）}

进一步阅读-


第一个示例中的问题是
toggle（）
未绑定到正确的
this

您可以在ctor中绑定它：

constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    ...

或者使用实例函数（在某些情况下可以）：

这种方法需要通过
stage-2
或
transform类属性
进行构建更改

实例属性函数的警告是，每个组件都会创建一个函数。如果页面上的函数不多，这是可以的，但要记住。一些模拟库也不能很好地处理箭头函数（即箭头函数不在原型上，而是在实例上）

这是基本的JS；可能会有所帮助。
第一个示例中发生的情况是，您已经失去了“This”的作用域。通常我所做的是在构造函数中定义所有函数，如下所示：

constructor(props) {
    super(props);
    this.state = { loading: false };
    this.toggle = this.toggle.bind(this);
}

在第二个示例中，您使用的是ES6语法，它将自动绑定该语法（这就是为什么这样做的原因）

然后在你的onPress函数中，你需要调用你所构建的函数，它看起来像这样

onPress={this.toggle}

一般来说，您不希望在渲染过程中创建新函数。而是在ctor中绑定或使用自动绑定的实例属性函数。是的，非常好。如果您在渲染中使用箭头函数，它每次都会创建一个新函数。我想连React文档都建议使用.bind（）这篇文章正是我需要了解的。唯一的问题是，它在每个组件实例化时创建一次？我的意思是，我真的很喜欢这种属性语法，但它会影响性能吗？@NickKraev视情况而定。如果页面上没有数百个组件，那么这篇文章就毫无意义了。一般来说，JS相当快，而且还有许多其他React优化比这更有效（例如，
shouldComponentUpdate
-键入内容）。很好的解释，仍然需要解决很多问题。谢谢！我想您可能需要
这个。切换
，否则它将在渲染时执行。
constructor(props) {
    super(props);
    this.state = { loading: false };
    this.toggle = this.toggle.bind(this);
}

onPress={this.toggle}