javascript - React组件的componentDidMount中的耗时函数调用

Question

在我的 React 组件的 componentDidMount 函数中，我将一个字符串（通过 props 接收）传递给一个函数，该函数对该字符串执行一些处理并返回另一个字符串作为结果。然后我使用生成的字符串更新状态。

import React, { Component } from "react";
import {fun} from "../some/module";

class Comp extends Component {
    state = {
        data: "default value"
    };

    componentDidMount() {
        var { str } = this.props;
        var data = fun(str);
        this.setState({ data });
    }

    render() {
        return (
            <p>{this.state.data}</p>
        );
    }
}

export default Comp;

该功能fun(text)最多运行 3 - 4 秒。它不会从任何远程服务器获取任何数据，它只会根据给定的字符串生成一个新字符串。我在另一个组件上有这个组件的 React Router Link。我可以通过单击该链接来查看此组件。问题是当我单击该链接时，它会等到 componentDidMount 函数完成执行，然后呈现该组件。由于 componentDidMount 函数中的那个耗时的函数调用，这个延迟会持续 3 - 4 秒。

我想在使用默认状态单击该链接后立即呈现此组件。在fun(text)函数完成执行后，我想再次渲染或使用返回的字符串更新这个组件fun(text)。

如何在此组件中实现此行为？我应该在何时何地调用该函数fun(text)？

标签： javascriptreactjs

Answer 1

您可以使用static getDerivedStateFromProps()而不是componentDidMount.

static getDerivedStateFromProps(nextProps,prevState) {
      if(nextProps.str) {
            const resultData = fun(str);
            return {
                 data: resultData
            } 
     }
    return null

}

我希望它会有所帮助。有关getDerivedStateFromProps()此处的更多信息是链接