学习日志1

2020.09.21， 1. 复习了contextAPI（Provider/Consumer）；
2. 高阶组件（传入一个组件，返回一个新组件， 比如logger组件），特别要注意的是静态方法，可以通过继承来保留之前的静态方法， ref也比较特殊，可以通过逼得props来传递，比如重命名为myRef，然后在源组件中通过props.myRef来获取（ref是一个特殊的属性，类似的有key，它们不在props中）

3. react-router-dom, react的路由库，基本上是这样的结构：

import { HashRouter, Route, Link } from 'react-router-dom';
ReactDOM.render(
  <HashRouter>    /*路由的包裹容器*/
    <>
      <ul>
        <li>
          <Link to="/"></Link>
        </li>
        <li>
          <Link to="/user"></Link>
        </li>
        <li>
          <Link to="/profile"></Link>
        </li>
      </ul>
      <Route path="/" component={Home} />
      <Route path="/user" component={User} />
      <Route path="/profile" component={Profile} />
    </>
  </HashRouter>,
  document.getElementById('root')
);

4. path-to-regexp,这个包是用来匹配路由的，普通用法就只是匹配路由是否相等，稍微高阶的，就是取路径参数（子组件中，this.props.match.params.xxx）
5. 路由权限， 组件Protected用来表示权限路由，(原理大约是： 当路由渲染时，路径匹配到之后，先找组件的component属性，能找到的话，就用component渲染，找不到的话，就找它的render属性)

//Protected.js
import React from 'react';

export default (props) => {
  let { path, component: RouteComponent } = props;
  return (
    <Route
      path={path}
      render={(props) =>
        localStorage.getItem('logined') ? (
          <RouteComponent {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location.pathname },
            }}
          />
        )
      }
    />
  );
};

6. 渲染一个Route有三种方式

 //优先级 1>2>3
1. component  组件
2. render  函数 （路径匹配才渲染）
3. children  函数  （不管路径匹不匹配都渲染），应用于MenuLink，如果路径匹配的话，会有match，否则没有match属性

接下来，介绍children

import React from 'react';
import { Route, Link } from 'react-router-dom';
export default (props) => {
  let { to, exact, children } = props;
  return (
    <Route
      path={typeof to == 'object' ? to.pathname : to}
      exact={exact}
      children={(childProps) => ( //匹配到后，给link加active类来得到高亮效果
        <Link to={to} className={childProps.match ? 'active' : ''}>{children}</Link>; 
      )}
    ></Route>
  );
};

7. withRouter
   withRouter可以讲一个不在router系统中的组件，纳入到router系统中。
   实现原理如下：

import React from "react";
import {Route} from "./";
export default function(OldComponent) {
  return () => <Route component={OldComponent}/>
}
//使用时
import React from "react";
import {withRouter} from "react-router-dom";
class Demo extends React.Component {  //demo组件是脱离router系统的，因此，它本来是不能使用history的
  render (
    return (
      <div onClick={this.props.history.push('/')}>logo</div>
    )
  )
}

export default withRouter(Demo);

8. browserRouter
   browserRouter是浏览器路由，HashRouter是hash路由，HashRouter监听hashchange事件， browserRouter监听的是浏览器的popState和pushState。