react中router底层原理结合参考资料的分析

2017-12-26

本文为我对react中router底层原理结合参考资料的分析:
1.路由是什么
个人理解:路由是访问各个组件的转发器;
路由的分类：路由分为一级路由和嵌套路由了;
路由的实现原理:
由UI = reducer(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>
    );
  };
}