reactjs - 刷新当前页面时未调用 componentWillUnmount()

Question

我一直遇到这样的问题:刷新当前页面(以及随后的组件)时，componentDidMount() 方法中的代码无法正确触发。但是，只需通过单击链接在我的网站中导航和路由，它就可以完美地工作。刷新当前页面？没有机会。

我发现问题在于，当我刷新页面并触发精细点击链接并导航我的网站/应用程序时，componentWillUnmount() 不会触发。

componentWillUnmount() 的触发对于我的应用至关重要，因为我在 componentDidMount() 方法中加载和处理的数据对于显示信息非常重要给用户。

我需要在刷新页面时调用 componentWillUnmount() ，因为在我的 componentWillMount() 函数中(每次刷新后都需要重新渲染)我这样做一些简单的过滤并将该变量存储在状态值中，该状态值需要存在于 logos 状态变量中才能使组件的其余部分正常工作。在组件生命周期的任何时候，这都不会更改或接收新值。

componentWillMount(){
  if(dataReady.get(true)){
    let logos = this.props.questions[0].data.logos.length > 0 ? this.props.questions[0].data.logos.filter((item) => {
      if(item.logo === true && item.location !== ""){
        return item;
      }
    }) : [];
    this.setState({logos: logos});
  }
};

悬崖:

• 我在componentWillMount()方法中进行数据库过滤
• 刷新后需要它出现在组件中
• 但我遇到一个问题，刷新页面时 componentWillUnmount() 不会触发
• 需要帮助
• 请

Answer 1

当页面刷新时，React 没有机会像平常一样卸载组件。使用window.onbeforeunload设置刷新处理程序的事件(阅读代码中的注释):

class Demo extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.componentCleanup = this.componentCleanup.bind(this);
    }

    componentCleanup() { // this will hold the cleanup code
        // whatever you want to do when the component is unmounted or page refreshes
    }

    componentWillMount(){
      if(dataReady.get(true)){
        let logos = this.props.questions[0].data.logos.length > 0 ? this.props.questions[0].data.logos.filter((item) => {
          if(item.logo === true && item.location !== ""){
            return item;
          }
        }) : [];

        this.setState({ logos });
      }
    }

    componentDidMount(){
      window.addEventListener('beforeunload', this.componentCleanup);
    }

    componentWillUnmount() {
        this.componentCleanup();
        window.removeEventListener('beforeunload', this.componentCleanup); // remove the event handler for normal unmounting
    }

}

useWindowUnloadEffect Hook

我已将代码提取到基于 useEffect 的可重用 Hook 中:

// The hook

const { useEffect, useRef, useState } = React

const useWindowUnloadEffect = (handler, callOnCleanup) => {
  const cb = useRef()
  
  cb.current = handler
  
  useEffect(() => {
    const handler = () => cb.current()
  
    window.addEventListener('beforeunload', handler)
    
    return () => {
      if(callOnCleanup) handler()
    
      window.removeEventListener('beforeunload', handler)
    }
  }, [callOnCleanup])
}


// Usage example
  
const Child = () => {
  useWindowUnloadEffect(() => console.log('unloaded'), true)
  
  return <div>example</div>
}

const Demo = () => {
  const [show, changeShow] = useState(true)

  return (
    <div>
      <button onClick={() => changeShow(!show)}>{show ? 'hide' : 'show'}</button>
      {show ? <Child /> : null}
    </div>
  )
}

ReactDOM.render(
  <Demo />,
  root
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>