javascript – 为什么我能够使用this.state而不必绑定或使用箭头函数React

我知道箭头函数继承了父元素的上下文,这就是它们在React中非常有用的原因.但是,我有这个React组件：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';


class AlbumList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            albums: [],

        };

        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(response => {
                 this.setState({ albums: response.data });
            });
    }


    renderAlbums() {
        const { albums } = this.state;
        const array = albums.map(album => (
                <Text>{album.title}</Text>
            ));

        return array;
    }


    render() {
        return (
            <View>
                { this.renderAlbums() }
            </View>
        );
    }
}

export default AlbumList;

{this.renderAlbums()}工作正常,我不必将renderAlbums()转换为箭头函数.我一直在阅读stackoverflow上的其他答案,但他们都提到你需要箭头功能或绑定,以使其正常工作.但在我的情况下,它工作正常,所以为什么在es6类中使用箭头函数？

解决方法:

如果你正在使用箭头函数那么“this”是由定义函数的块定义的.如果你正在使用“普通”函数,那么“this”由函数调用的地方定义.在这种情况下,您从render方法中调用它,因此“this”仍然是组件的一个实例.如果您尝试通过onClick等按钮调用类似函数,则无法找到“setState”,因为“this”基本上由实际呈现的按钮而不是react类定义.

标签：javascript,ecmascript-6,reactjs,react-native,arrow-functions
来源： https://codeday.me/bug/20190607/1193629.html