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

Question

我的组件 this.props.save(); 何时 componentWillUnmount？但是，如果我将页面留在不同选项卡中的外部链接，它不会触发 componentWillUnmount

我的组件

export default class AutoSave extends React.Component {

  constructor(props) {
    super(props);
    this.setIntervalId = null;
  }

  componentDidMount() {
    if (!window.onbeforeunload) {
      window.onbeforeunload = () => {
        this.props.save();
      };
    }

    this.setIntervalId = setInterval(() => this.props.save(), this.props.intervalInMs);
  }

  componentWillUnmount() {
    this.props.save();
    clearInterval(this.setIntervalId);
  }

  render() {

    return <span className="saving">Last saved at {now()}</span>;
  }
}

我的链接是这样的

<Link href="http://www.google.com"  target="_blank">
      Google Link
    </Link> 

如何在用户单击链接时保存组件？这是一个 React/redux 应用程序。

Answer 1

你为什么要在从“React.Component”扩展的类中做某种工作。在 ReactJS 中，组件并不意味着做那样的工作。来自官方文档“Components let you split the UI into independent, reusable pieces, and think of each piece in isolation.”。除了与 ui 相关的 span 之外，你的组件中没有任何部分。无论如何，您应该将 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>
        );
    } 
}