Question

这是我要完成的代码示例。

class NetworkCallHOC extends React.Component {

    makeNetworkCall = () => {
        this.setState({ isInNetworkCall: true });
        // Make Some Network Call;
        // On NetworkCall Complete;
        this.setState({ isInNetworkCall: false });
    }

    state = {
        isInNetworkCall: false,
        makeNetworkCall: this.makeNetworkCall,

    }
    render() {
        const { isInNetworkCall } = this.state;
        if (isInNetworkCall) {
            return // Some Loading screen;
        } else {
            const { children } = this.props;
            return children(this.state)
        }
    }
}

此“高阶渲染道具”将一个组件作为子组件并向下传递function makeNetworkCall。

现在，当调用makeNetworkCall时，将卸载子组件，并且在完成网络调用之后，将重新安装新的子组件，并调用该子组件的所有生命周期方法。

在这种情况下，有没有一种方法可以避免重新创建子组件。

谢谢。

Answer 1

一种解决方案是始终渲染子项，并在其顶部显示可选的加载屏幕。

类似的东西：

render() {
    const { isInNetworkCall } = this.state;
    const { children } = this.props;

    return <div>
        {children(this.state)}
        <Mask visible={isInNetworkCall}/>
    </div>
}

以Render-Prop模式反应卸载基本组件

1 个答案: