reactjs - 为什么我们应该避免组件构造函数中的副作用？

Question

我想知道是否有充分的理由不在组件的构造函数中而不是在它的 componentDidMount 中发送请求。钩？我见过一些 interesting (but a bit incomplete) answers对于:在构造函数中获取数据是个好主意吗？答案引用了文档中有趣的一点:

Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use componentDidMount() instead.

我的问题是关于这一点，我很想知道 有什么问题副作用 例如在这里在构造函数中发送请求。

也许一个简单的例子将有助于消除关于我的问题和链接问题之间差异的任何歧义:

在构造函数中发送请求

class SomeComponent extends React.Component {
    constructor(props) {
        this.request = fetch(props.someURL);
    }

    async componentDidMount() {
        const data = await this.request;
        this.setState({'data': data});
    }
}

或发送至 componentDidMount

class SomeComponent extends React.Component {
    async componentDidMount() {
        const data = await fetch(props.someURL);;
        this.setState({'data': data});
    }
}

或者如链接问题中所建议的那样，绝对不好:在构造函数中获取

class SomeComponent extends React.Component {
    constructor(props) {
        this.data = await fetch(props.someURL);
    }

    async componentDidMount() {
        this.setState({'data': this.data});
    }
}

Answer 1

好吧，有多种原因:

您的副作用在服务器端渲染和 SSR 中并不总是有意义甚至可运行的 componentDidMount钩子(Hook)不会被调用，你的拆卸逻辑也不会运行

它可能会触发意外 setState这在 this answer 中得到解决

在某些情况下，组件会被构造，但不会被挂载或稍后被挂载，并且在它们的构造函数中调用副作用是没有意义的