React38路由守卫的实现和使用以及Route的不同渲染方式解析

• 路由守卫其实就是我们的路由拦截，当我们有一些页面需要登录之后才有权限去访问的时候，我们的路由守卫就可以派上用场了
• React里的路由守卫其实也是一个组件，最后返回的还是Route组件

 

• 示例： 

        使用路由守卫的组件：

        

        守卫组件：

        

        

• 剖析一下上面例子中的点：
• 在守卫组件中， 为什么要写render={()=>{组件标签}}这种写法，而不是常见的component={()=>(组件标签)}

                解析：首先如果不需要往组件里传参的话，那么component的值直接写组件名称或者匿名函数都是可以的。如果需要传参，那么就能直接写组件名称了。再来说component={()=>(组件标签)}和render={()=>{组件标签}}的差异。如果使用component={()=>(组件标签)}这种方式，那么当传参发生变化的时候，该组件的 componentDidMount会一直被调用，而render={()=>{组件标签}}这种写法就不会。其背后的原理在于，react的比较组件状态以便决定是否更新dom节点时，首先要比较组件的type和key。在使用<Route component={ ()=>(有传参的组件) }>时，由于调用了React,createElement（因为虚拟dom要渲染成真正的dom）。组件的type直接渲染的组件，而是一个匿名函数。每次render时都生成一个匿名函数，导致生成的组件的type总是不相同，所以会产生重复的unmounting和mounting。而且这两种方式的this指向不同， component={组件} 组件直接挂载到router下面，render={()=>{组件}}本身就是个组件，组件内部在引用你定义的组件，相当于又加了一层，this已经不一样了。

• Route有三种渲染方法，component、render、childern
• 
• render 和 component渲染的方式非常相似， 只不过render可以携带参数，而component不能。在大多数情况下使用component就可以了。
• render 不能和 component 同时使用，因为这是没有意义的， component有比 render更高的优先级。render的渲染性能比component要高，由于component的渲染方式当路由离开当前路径，当前组件将会被卸载，相反如果进入则装载， 而render 持续维持挂载状态。
• 关于 children渲染方法， children同样接受一个回调函数，同render一样。children 将渲染成Route 的子组件，所谓子组件，即即便路由路径没有匹配到当前路由，该组件也会被渲染。
• react-router中不同路由使用相同组件渲染，必须加上key值，否则组件不会重新渲染，也就是不会重新进入组件得生命周期。