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)？

Answer 1

您可以使用static getDerivedStateFromProps() 代替componentDidMount。

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

}

我希望它会有所帮助。有关getDerivedStateFromProps() 的更多信息，这里是Link