React实现页面每次展示就触发事件

有的情况下，我们在react项目中需要在页面每次被打开就执行一个事件，类似于uniapp的onShow生命周期函数，react有一个生命周期componentDidMount()可以实现页面刚打开就执行，但是未销毁的页面他就办不到了，只能通过其他的方法。

在react中有一个生命周期'componentWillReceiveProps', componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。这个东西十分好用，但是一旦用错也会造成十分严重的后果。

这个生命周期确实会在页面每次被点开就会触发一次，我们可以在这里写上我们要执行的函数，但是这个生命周期有一个严重的问题就是在这个页面操作其他元素也会触发，这个就会导致很多意想不到的问题

所以我们需要给这个生命周期加上一个限制，让他只在页面每次打开的时候就刷新一次，做其他的操作不会触发，下面直接上代码

class test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            flag:false //定义一个flag，默认false
        }
    }
    //页面刚被渲染就刷新一次数据，这个函数只要页面没被销毁下次再打开也不会执行
    componentDidMount(){
      this.searchData()
    }
    //改造这个生命周期，加上限制
    componentWillReceiveProps(nextProps) {
      let { flag } = this.state
      let pathnameStr = location.pathname; //获取当前页面的location
      if (nextProps) {
           //拿当前页面的路由和pathnameStr作比较，如果相等就是进入了该页面
           if (pathnameStr == '/juejin/lalala') {
                //如果为真才请求数据，第一次页面打开不会执行，因为pageflag默认是false
                if (flag) {
                    this.searchData()
                }
            } else {
                //当离开当前页面就将flag设置为true
                this.setState({ flag: true })
                console.log('离开了页面');
            }
    }
    searchData = () => {
        console.log('请求了数据');
        //请求完数据就设置为false，这样就保证了只会执行一次
        this.setState({flag:false})
    }
 }

执行流程：

1.页面刚打开componentDidMount()先执行一次，这里componentWillReceiveProps就没有必要再次执行，所以默认flag为false。

2.这个生命周期有个特点，就是只要当前页面没被注销，跳转其他页面会一直触发这个函数，所以通过if (pathnameStr == '/juejin/lalala') 判断是不是进入了目标页面，如果是就请求数据，请求完立马将flag设置为false，这样就没办法再触发了

3.当页面离开的时候，再将flag设置为true,这样就形成了一个页面展示就刷新的效果。