Question

我很难理解Java语言中this关键字的使用。

我偶然发现的关于stackoverflow的其他问题更多是关于使用this关键字调用方法或函数的问题。像使用bind或ES6箭头功能等等。

所以我在React中有这个有状态组件，我们正在使用Axios拦截请求

import React, { Component } from 'react';
import Modal from '../../components/UI/Modal/Modal';
import Aux from '../Aux/Aux';

const withErrorHandler = ( WrappedComponent, axios ) => {
    return class extends Component {
        state = {
            error: null
        }

        componentWillMount () {
            this.reqInterceptor = axios.interceptors.request.use(req => {
                this.setState({error: null});
                return req;
            });
            this.resInterceptor = axios.interceptors.response.use(res => res, error => {
                this.setState({error: error});
            });
        }

        componentWillUnmount() {
            axios.interceptors.request.eject(this.reqInterceptor);
            axios.interceptors.response.eject(this.resInterceptor);
        }

        render () {
            return (
                <Aux>
                    <Modal 
                        //Something
                    </Modal>
                    <WrappedComponent {...this.props} />
                </Aux>
            );
        }
    }
}

export default withErrorHandler;

类似于上面的代码，在上面的代码中，我们称为拦截器，我们希望在需要componentWillMount时将其删除（以避免内存泄漏）

为此，讲师在componentDidMount中执行了类似的操作，然后

this.reqInterceptor = axios.interceptors.request.use(req => {
                this.setState({error: null});
                return req;

this在componentWillUnmount

中

 axios.interceptors.request.eject(this.reqInterceptor);

[问题] 有人可以在这里this.reqInterceptor解释我吗？就像我们不应该创建一个构造函数并在那里声明它然后使用它（也许我在想错）吗？

Answer 1

要回答您的问题，我们首先需要对React.Component的结构有充分的了解。

反应性有状态组件的设计很好，可以利用一些面向对象的编程（尽管您可以在其他范式中实现相同的模式。）您拥有this，它可以使用整个组件类。您可以通过引用范围内的this来检索属性或为属性分配值，或调用组件的绑定方法。

在有状态组件中，当DOM准备就绪并安装时，React执行componentDidMount()，然后根据您的代码，通过reqInterceptor， { {1}}基本上是我们从函数this.reqInterceptor = value...返回的组件。

这是动态动态创建组件的常见模式。我们可以在以下示例中应用相同的示例，以演示它如何在ES6类的范围内工作：

this

更新：我将上面的示例更新为在语义上接近function withErrorHandler { return class extends Component {...} }

Answer 2

将使用/A关键字调用构造函数，因此，由于方法定义不在构造函数中，因此您可以实例化多个对象，并且不会在每次侦听器时都进行注册。

在这种情况下，他想将class方法绑定到react生命周期（new和componentWillMount）。

了解在类方法中的用法

2 个答案: