react中深层原理解析

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

2.再次访问的时候，只会加载调用匹配路径中发生改变的部分的组件的生命周期函数:

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

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/bodyindex';

import 'antd/dist/antd.css';

export default class Index extends React.Component {

    constructor(props) {
     super(props);
     alert('父级组件中的构造函数被执行');
  }

    componentWillMount(){
        //定义你的逻辑即可
        alert('父级组件中的构造函数被执行');
        console.log("Index - componentWillMount");
    }

    componentDidMount(){
        console.log("Index - componentDidMount");
    }

    render() {
        /*
        var component;
        if (用户已登录) {
            component = <ComponentLoginedHeader/>
        }
        else{
            component = <ComponentHeader/>
        }
        */
        return (
            <div>
                <ComponentHeader/>
                <BodyIndex userid={999} username={"Parry1"}/>
                <div>
                    {this.props.children}
                </div>
                <ComponentFooter/>
            </div>
        );
    }
}

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>
    );
  };
}