1、react源码

npx create-react-app myApp

1、react.js

import $ from 'jquery';
import {createUnit} from './unit';
let React = {
    render,
    rooterIndex: 0
}
// 此元素可能是一个文本节点、DOM节点(div)，或者自定义组件Counter
function render(element, container) {
    //container.innerHTML = `<span data-reactid="${React.rooterIndex}">${element}</span>`;

    // unit 单元就是用来负责渲染，负责把元素转化成可以在页面上显示的HTML标记
    let unit=createUnit(element);
    let markUp=unit.getMarkUp(React.rooterIndex);  //用来返回HTML标记
    $(container).html(markUp);
}

export default React;

2、unit.js

class Unit{
    constructor(element){
        // 凡是挂载到私有属性上的都以_开头
        this._currentElement=element; 
    }
    getMarkUp(){
        throw Error('此方法不能被调用');
    }
}
class TextUnit extends Unit{
    getMarkUp(reactid){
        this._reactid=reactid;
        return `<span data-reactid="${reactid}">${this._currentElement}</span>`
    }
}
function createUnit(element){
    if(typeof element ==='string' || typeof element ==='number'){
        return new TextUnit();
    }
}
export {
    createUnit
}

3、index.js

import React from './react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link,Switch,Redirect} from 'react-router-dom';
import Home from './components/Home';
import User from './components/User';
import Profile from './components/Profile';
/* import Link from './components/Link'; */

/***
 * Router 是路由容器，放在最外层
 * Route 代表路由配置 当前地址栏的路径是path，就渲染component
 * 匹配的path是前缀，url是以path开头的 /user exact不在匹配前缀了，而是精确匹配，看是否完全相等。
 * router配置有三种方式 1、手工代码 2、约定试 umi 3.配置式 routes.js  ant design pro
 */

ReactDOM.render(
  <Router>
    <>
      <ul>
        <li><Link to="/home">Home</Link></li>
        <li><Link to={{ pathname: '/user', state: { id: 1 } }}> User</Link></li>
        <li><Link to="/profile">Profile</Link></li>
      </ul>
      <Switch>
        <Route exact path="/home" component={Home} />
        <Route path="/user" component={User} />
        <Route path="/profile" component={Profile} />
        <Redirect to="/"></Redirect>

      </Switch>
    </>
  </Router>,
  document.getElementById('root')
);