在Safari中返回时,React 16会触发componentDidMount(),甚至从未卸载过组件。如何知道何时安装?

class Foo extends React.Component {
  state = {
    loading: false
  }

  componentDidMount() {
    // when going back in safari
    // triggers in react 16, but not in 15.3 or preact
    console.log('mounted');
  }

  componentWillUnmount() {
    // will never trigger
    console.log('will unmount');
  }

  leave() {
    this.setState({
      loading: true
    });
    setTimeout(() => {
      window.location.href = 'https://github.com/';
    }, 2000);
  }

  render() {
    return this.state.loading ? <div>loading...</div> : <button onClick={this.leave.bind(this)}>leave</button>;
  }
}

背景

Safari使用bfcache。如果返回,它将从缓存中获取最后一页。

当使用react 15.3或诸如preact之类的库时,离开页面不会触发componentWillUnmount,而返回页面也不会触发componentDidMount

此行为会导致多个问题-例如,当您在重定向之前将页面状态设置为loading时。如果用户返回,则状态仍设置为loading,您甚至无法使用componentDidMount重置状态,因为它永远不会触发。

通过使用onpageshow有一个solution,但是由于它是only triggers one time,因此您必须使用window.location.reload()重新加载整个页面。 这也是react无法依赖此解决方案的原因。

最佳答案

我不确切知道React 16是如何调用安装的,但是它是一个完全不同的引擎,因此它可能是故意的还是不是故意的。
要解决该问题,您可以做的一件事就是在重定向之前安排状态重置,如下所示:

<html>
  <head>
    <script
      crossorigin
      src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"
    ></script>
    <script
      crossorigin
      src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"
    ></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class Foo extends React.Component {
        state = {
          loading: false
        };
        componentDidMount() {
          console.log("mounted");
        }
        leave() {
          this.setState({
            loading: true
          });
          setTimeout(() => {
            this.setupReset();
            window.location.href = "https://github.com";
          }, 2000);
        }

        setupReset() {
          let interval = setInterval(() => {
            if (
              !!window.performance &&
              window.performance.navigation.type === 2
            ) {
              clearInterval(interval);
              console.log('reseting');
              this.setState({ loading: false });
            }
          },500);
        }

        render() {
          return this.state.loading ? (
            <div>loading...</div>
          ) : (
            <button onClick={this.leave.bind(this)}>leave</button>
          );
        }
      }
      ReactDOM.render(<Foo />, document.getElementById("app"));
    </script>
  </body>
</html>


然后,当您返回时,恢复执行,可以检测其是否来自历史记录并重置状态。

您实际上可以在第一次时直接在componentDidMount上设置此重置机制。

关于javascript - Safari浏览器缓存如何触发componentDidMount?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56258985/

10-11 17:41