学习日志1

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

  1. react-router-dom, react的路由库,基本上是这样的结构:
import { HashRouter, Route, Link } from 'react-router-dom';
ReactDOM.render(
      /*路由的包裹容器*/
    <>
      
, document.getElementById('root') );
  1. path-to-regexp,这个包是用来匹配路由的,普通用法就只是匹配路由是否相等,稍微高阶的,就是取路径参数(子组件中,this.props.match.params.xxx
  2. 路由权限, 组件Protected用来表示权限路由,(原理大约是: 当路由渲染时,路径匹配到之后,先找组件的component属性,能找到的话,就用component渲染,找不到的话,就找它的render属性)
//Protected.js
import React from 'react';

export default (props) => {
  let { path, component: RouteComponent } = props;
  return (
    
        localStorage.getItem('logined') ? (
          
        ) : (
          
        )
      }
    />
  );
};
  1. 渲染一个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 (
     ( //匹配到后,给link加active类来得到高亮效果
        {children}; 
      )}
    >
  );
};
  1. withRouter
    withRouter可以讲一个不在router系统中的组件,纳入到router系统中。
    实现原理如下:
import React from "react";
import {Route} from "./";
export default function(OldComponent) {
  return () => 
}
//使用时
import React from "react";
import {withRouter} from "react-router-dom";
class Demo extends React.Component {  //demo组件是脱离router系统的,因此,它本来是不能使用history的
  render (
    return (
      
logo
) ) } export default withRouter(Demo);
  1. browserRouter
    browserRouter是浏览器路由,HashRouter是hash路由,HashRouter监听hashchange事件, browserRouter监听的是浏览器的popStatepushState

你可能感兴趣的:(学习日志1)