react路由守卫、路由监听等总结

1、路由守卫（拦截）

        react框架没有路由守卫功能，只能通过在路由里设置meta元字符实现路由拦截。路由拦截就是路由在发生变化时需要进行的拦截处理。

2、监听路由变化

    方式：

  1、路由下的内容组件通过history对象来进行监听

class Header extends Component {
    componentDidMount() {
        // 监听路由的变化,如果路由发生变化则进行相应操作
        this.props.history.listen(location => {
            // 最新路由的 location 对象，可以通过比较 pathname 是否相同来判断路由的变化情况
            if (this.props.location.pathname !== location.pathname) {
               // 路由发生了变化
            }
        })
    }
}

       2、组件重新渲染前后（使用 componentWillReceiveProps 、 componentDidUpdate 、componentWillUpdate）

class Header extends Component {
    componentWillReceiveProps (nextProps, nextState) {
        if (this.props.location.pathname !== nextProps.location.pathname){
            // 路由发生了变化
        }
    }
}

       3、hooks方式监听

import React, { useEffect } from 'React';
const Header = function (props) {
  useEffect(() => {
    console.log(props.location);
  }, [props.location])
}
export default Header;

react组件创建方式分为类组件和函数组件（最佳）。

        纯函数组件优点是比类组件更加轻便。

        （纯函数：返回结果只依赖于它的参数，而且没有任何可观察的副作用，函数与外界交流数据只通过参数和返回值）

        纯函数组件也有以下不太好的地方：         

                1、纯函数组件没有状态

                2、纯函数组件没有生命周期

                3、纯函数组件没有this

                4、只能是纯函数

        为此React团队设计出了React Hooks（英文意思是“钩子”）。React默认有四种常用的钩子：

        1、useState(): 状态钩子

              用法与class的this.setState基本一致

        2、useContext():共享状态钩子

                        Context实现跨层级的组件数据传递，既不需要在组件树中通过逐层传递props或者

                state方法来传递数据。

                        该钩子的作用，在组件之间共享状态，其作用就是可以做状态的分发，作用是避

                免了react逐层通过Props传递参数

        3、useReducer():Action钩子

        4、useEffect():副作用钩子

       （副作用：在React组件中执行比如修改外部作用域/全局变量、修改传入的参数、发送请求、console.log、手动修改DOM都属于副作用）