Вам больше не нужно связывать функции в классах компонентов React?

Question

Я только что заметил, что если я определяю нормальные функции компонентов класса, мне больше не нужно связывать их внутри конструктора класса ... (поэтому, даже если я не использую синтаксис поля открытого класса ES6), я могу просто нормально передатьэти функции для моих обработчиков событий с помощью onClick = {this.someFunction} без необходимости предварительно связывать их с моим классом, и это не выдает ошибку при выполнении собственного события DOM (или синтетического события в случае React).И также не имеет значения, использую ли я функцию стрелки в качестве обработчика событий или просто передаю ссылку на функцию ...

это новая функция для React?Я думаю, что несколько месяцев назад этой функции еще не было ..

РЕДАКТИРОВАТЬ: вот пример кода, его простое приложение API подачи новостей, где в индексе есть подкомпонент ListItem, передающий обработчик нажатия ...

import {React, Component, fetch, API_KEY, BASE_URL} from '../config/config';
import ListComponent from '../components/ListComponent';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import { List } from '@material-ui/core';


const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    height: 400,
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
}));

export default class index extends Component { 
    constructor(props) {
        super(props);
        this.state = {
            news: this.props.news
        }
    }   


    static async getInitialProps() {
        let querystring = `${BASE_URL}top-headlines?q=sex&fsortBy=popularity&apiKey=${API_KEY}`;
        console.log(querystring);
        let news =  await fetch(querystring);
        news = await news.json();
        //console.log("NEWS:",news.articles);
        return {
            news: news.articles
        }
    }

    getOutput (e) {
        console.log("Item ",e," was clicked!");
    }

    render() {
        return (
            <div>
                {                    
                   this.state.news.map((news,index) => (
                    // <ListItem button 
                    // key={index} 
                    // onClick={e => this.getOutput(e)}>
                    // <ListItemText primary={`${news.title}`} />
                    // </ListItem>
                    <ListComponent 
                    index = {index}
                    news = {news}
                    clicked = {this.getOutput}
                    />
                    )
                   )

                }
            </div>
        )
    }
}

Вот подкомпонент списка:

import React from 'react'    

export default function ListComponent({index,clicked,news}) {
    return (
        <li key={index} onClick ={clicked}>
            {
                news.title
            }
        </li>
    )
}

Я только что проверил, и это сработало!Примечание. Это пример Next.js, но я также протестировал его в обычном React-приложении (созданном с помощью create-реагировать-app), и он работал с тем же примером ... когда я щелкаю элемент списка, яполучить консольный вывод:

Item  Class {dispatchConfig: {…}, _targetInst: FiberNode, nativeEvent: MouseEvent, type: "click", target: li, …}  was clicked!

Answer 1

Это не относится к react, но как работает JavaScript class и this.

В вашем примере вы не получаете ошибок, потому что не делаете ничего плохого. Хотя, когда вы хотите вызвать this.setState или сослаться на что-либо с помощью this, вы можете получить ошибку или неожиданные результаты, потому что this не будет ссылаться на то, что, как вы думаете, будет, он будет ссылаться на элемент, вызвавший событие.

Почему поле класса с функциями стрелок"решает" проблему без жесткого связывания this? потому что они «обрабатывают» контекст this, который они на самом деле ничего не делают. это означает, что ссылка this в контексте выполнения переноса - это ссылка, которую вы получите внутри функции стрелки.

Кстати, существует разница между полем класса функциями и методами класса в том, что методы класса создаются в прототипе, а поля создаются в экземпляре .

Я сделал простую блок-схему, которая может помочь понять, на что ссылается this для данного контекста (всегда сверху вниз, порядок имеет значение)

Answer 2

Это не новая функция React.Вы можете получить доступ к любой функции или свойству из класса без привязки.Причина, по которой вы делаете привязку (или объявляете функцию стрелки), заключается в подключении локального this к глобальному контексту, чтобы он мог ссылаться на класс (родительская функция).Попробуйте использовать, например, this.props внутри функции getOutput, и вы получите ошибку.