Javascript 当用户单击按钮时，如何使可重用的react组件保存？

我的组件

this.props.save（）当
组件将卸载时
？但是，如果我将页面留给另一个选项卡中的外部链接，它不会触发
componentWillUnmount

我的组件


导出默认类AutoSave.Component{
建造师（道具）{
超级（道具）；
this.setIntervalId=null；
}
componentDidMount（）{
如果（！window.onbeforeunload）{
window.onbeforeunload=（）=>{
this.props.save（）；
};
}
this.setIntervalId=setInterval（（）=>this.props.save（），this.props.intervalInMs）；
}
组件将卸载（）{
this.props.save（）；
clearInterval（this.setIntervalId）；
}
render（）{
返回上次保存在{now（）}的位置；
}
}
为什么要在一个扩展自“React.Component”的类中执行某种工作。在ReactJS中，组件不适合做这样的工作。在官方文档中，“组件允许您将UI拆分为独立的、可重用的部分，并单独考虑每个部分。”。除了与UI相关的范围之外，组件中没有任何部分。无论如何，您应该将AutoSave创建为纯组件，并在所有React组件中使用它：

export default class AutoSave 
{
  constructor(saveFn, intervalInMs) {
    this.saveFn = saveFn;
    this.setIntervalId = setInterval(
        () => { 
            this.save();
        }, 
        intervalInMs
    );
  }

  unmount() {
    this.save();
    clearInterval(this.setIntervalId);
  }

  save() {
    this.saveFn();
    this.callOnSaveCallback();
  }

  onSave(callback) {
    this.onSaveCallback = callback;
  }

  // private method that calls onSaveCallback
  callOnSaveCallback() {
    if(this.onSaveCallback != null)
        this.onSaveCallback();
  }

}

在我的React组件中使用它，如下所示：

import AutoSave from './AutoSave';
export default class ReactComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // ... other properties
            "lastSave": new Date()
        }
        this.save = this.save.bind(this);
        this.autoSave = new AutoSave(this.save, 100);
        this.autoSave.onSave(
            () => {
                this.setState(
                    {
                        "lastSave": new Date()
                    }
                );
            } 
        )
    }

    componentWillUnmount() {
        this.autoSave.unmount();
        this.autoSave = null;
    }  

    onClick() {
        this.autoSave.save();
    } 

    save() {
        // some saving job
    }

    render() {
        return ( 
            <div>
                // ... other components
                <Link href="http://www.google.com"  target="_blank" onClick={this.onClick.bind(this)}>
                  Google Link
                </Link> 
                <span className="saving">Last saved at {this.state.lastSave}</span>
            </div>
        );
    } 
}

从“/AutoSave”导入自动保存；
导出默认类ReactComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
//……其他财产
“lastSave”：新日期（）
}
this.save=this.save.bind（this）；
this.autoSave=新的自动保存（this.save，100）；
这个是autoSave.onSave(
() => {
这是我的国家(
{
“lastSave”：新日期（）
}
);
} 
)
}
组件将卸载（）{
this.autoSave.unmount（）；
this.autoSave=null；
}  
onClick（）{
this.autoSave.save（）；
} 
保存（）{
//一些储蓄工作
}
render（）{
报税表（
//……其他组成部分
谷歌链接
上次保存于{this.state.lastSave}
);
} 
}
打开新选项卡不会触发componentWillUnmount（）或onbeforeunload。在这两种情况下，因为您的应用程序仍在原始选项卡中打开。React不会在关闭或离开页面之前立即卸载组件，因此即使页面关闭，componentWillUnmount（）也不会执行任何操作。onbeforeunload仅在您离开同一选项卡中的页面或关闭选项卡/窗口时触发

如果希望在用户每次单击按钮时可靠地调用此.props.save（），只需向按钮添加一个onClick处理程序即可

render() {
  return <span onClick={this.props.save} className="saving">Last saved at {now()}</span>;
}

render（）{
返回上次保存在{now（）}的位置；
}
打开新选项卡不会触发
组件willunmount（）
或
在卸载之前打开
。在这两种情况下，因为您的应用程序仍在原始选项卡中打开。React不会在关闭或离开页面之前立即卸载组件，因此
componentWillUnmount（）
即使关闭页面也不会执行任何操作
onbeforeunload
仅在您离开同一选项卡中的页面或关闭选项卡/窗口时触发。如果您想在用户每次单击按钮时可靠地调用
this.props.save（）
，那么只需在按钮上添加一个
onClick
处理程序即可。您能告诉我怎么做吗？如果它是一个react组件，为什么会有不同。我试图在多个地方重用它，而不必重做它在组件中的使用方式？有没有可能你有最新的答案？