react中深层原理解析

亦凉 2022-06-01 22:47 188阅读 0赞

本文为我对react总router底层原理结合参考资料的分析:  
1.路由是什么  
个人理解:路由是访问各个组件的转发器;  
路由的分类：路由分为一级路由和嵌套路由了;  
路由的实现原理:  
由UI = reducr(stateorproperty);可知，路由的底层原理还是状态或者属性改变驱动的；  
可以理解为路由有一个location属性，通过浏览器可以改变Router的属性值，从而驱动属性进行渲染:  
3.使用路由进行页面跳转会导致渲染效率的降低么?  
答案是不会的，当通过嵌套路由**首次** 访问嵌套的组件的时候，被嵌套的子组件的父级组件也会进行加载渲染，此时父子组件的生命周期函数将被执行，但是首次访问但并未离开当前页面【顶级路由路径未改变的时候】，访问嵌套的其他组件的时候，会根据访问的路径加载指定的组件，此只会加载路径中体现变更部分的组件。  
如下图所示:  
1.首次访问的时候，路径匹配的组件的生命周期函数都将被执行\[注意访问的路径是嵌套路由的路径\]:  
![这里写图片描述][SouthEast]  
2.再次访问的时候，只会加载调用匹配路径中发生改变的部分的组件的生命周期函数:  
![这里写图片描述][SouthEast 1]  
3.（1.0）路由实际是一个组件，其中嵌套了所有的希望访问的可以访问的组件；  
（2.0）通过路由访问的知识路径匹配的组件;  
(3.0)当存在页面内无刷新内容变换的时候建议使用嵌套路由  
4.路由使用的小案例:

root.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import Index from './index';
    import ComponentList from './components/list';
    import ComponentDetails from './components/details';
    import ComponentDetails2 from './components/details2';
    import {Router,Route,hashHistory} from 'react-router';
    
    export default class Root extends React.Component{ 
      render(){
        return (
          //这里替换了之前的 Index，变成了程序的入口
          <Router history={hashHistory}>
    
            <Route component={Index} path="/">
              <Route component={ComponentDetails} path="details"></Route>
              <Route component={ComponentDetails2} path="details2"></Route>
            </Route>
    
            <Route component={ComponentList} path="list/:id"></Route>
    
          </Router>
        );
      };
    }
    
    ReactDOM.render(<Root/>, document.getElementById('example'));

index.js

detail.js

import React from 'react';
    export default class ComponentDetails extends React.Component{ 
      constructor(props) {
        super(props);
        alert('子级组件中的构造函数被执行');
      }
    
      componentWillMount(){
        //定义你的逻辑即可
        alert('子级组件中的构造函数被执行');
        console.log("ComponentDetails - componentWillMount");
      }
    
      render(){
        return (
          <div>
            <h2>这里是嵌套在首页中的详细的页面，测试构造函数是否会被加载</h2>
          </div>
        );
      };
    }

detail2.js

import React from 'react';
    export default class ComponentDetails extends React.Component{ 
      constructor(props) {
        super(props);
        alert('子级组件2中的构造函数被执行');
      }
    
      componentWillMount(){
        //定义你的逻辑即可
        alert('子级组件2中的构造函数被执行');
        console.log("ComponentDetails - componentWillMount");
      }
    
      render(){
        return (
          <div>
            <h2>这里是嵌套在首页中的详细的页面2，测试构造函数是否会被加载</h2>
          </div>
        );
      };
    }

[SouthEast]: /images/20220602/c25342b551294ae4a66fb2a7e91c9458.png
[SouthEast 1]: /images/20220602/a075017c5a164cf8bc8bfe0a14544b76.png