react-router

react-router包含3个库，react-router、react-router-dom和react-router-native。react-router提供最基本的路由功能，实际使用的时候我们不不会直接安装react-router，而是根据应用运行的环境选择安装 react-router-dom(在浏览器器中使用)或react-router-native(在rn中使用)。react-router-dom和 react-router-native都依赖react-router，所以在安装时，react-router也会自动安装，创建web应⽤用，使⽤:

安装

npm install --save react-router-dom

基本使⽤

react-router中奉⾏⼀一切皆组件的思想，路由器器-Router、链接-Link、路由-Route、独占-Switch、重定向-Redirect都以组件形式存在
创建RouterPage.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default class RouterPage extends Component {
  render() {
    return (
      <div>
        <h3>RouterPage</h3>
        <Router>
<Link to="/">⾸页</Link>
<Link to="/user">⽤户中⼼</Link>
{/* 根路路由要添加exact，实现精确匹配 */} <Route
            exact
            path="/"
            component={HomePage}
            //children={() => <div>children</div>}
            //render={() => <div>render</div>}
            />
          <Route path="/user" component={UserPage} />
        </Router>
</div>
); }
}
class HomePage extends Component {
  render() {
    return (
      <div>
        <h3>HomePage</h3>
      </div>
); }
}
class UserPage extends Component {
  render() {
    return (
      <div>
        <h3>UserPage</h3>
      </div>
 );

  } }

Route渲染内容的三种⽅方式

Route渲染优先级:children>component>render。
这三种⽅式互斥，你只能⽤⼀一种。

children:func

有时候，不管location是否匹配，你都需要渲染⼀一些内容，这时候你可以⽤children。除了不管location是否匹配都会被渲染之外，其它⼯作⽅方法与render完全一样。

render:func

但是当你用render的时候，你调⽤的只是个函数。只在当location匹配的时候渲染。

component: component

只在当location匹配的时候渲染。

404⻚页⾯面

设定一个没有path的路由在路由列表最后⾯面，表示⼀定匹配


{/* 添加Switch表示仅匹配一个*/} <Switch>
{/* 根路由要添加exact，实现精确匹配 */} <Route
   exact
   path="/"
   component={HomePage}
 />
 <Route path="/user" component={UserPage} />
 <Route component={EmptyPage} />
</Switch>
class EmptyPage extends Component {
 render() {
   return (
     <div>

<h3>EmptyPage-404</h3>
     </div>
); }
}

PureComponent与Component`

React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate() ，而 React.PureComponent 中以浅层对⽐比 prop 和 state 的方式来实现了该函数。
如果赋予 React 组件相同的 props 和 state， render() 函数会渲染相同的内容，那么在某些情况下使⽤ React.PureComponent 可提高性能。
React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate() ，⽽React.PureComponent 中以浅层对⽐比 prop 和 state 的⽅式来实现了该函数。
如果赋予 React 组件相同的 props 和 state， render() 函数会渲染相同的内容，那么在某些情况下使⽤ React.PureComponent 可提高性能。
注意
React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层⽐比较。如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产⽣错误的⽐比对结果。仅在你的 props 和 state 较为简单时，才使⽤用 React.PureComponent ，或者在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新。你也可以考虑使⽤ immutable 对象加速嵌套