React 笔记

环境介绍:

• Webpack: 3.2.0
• React: 15.6.1
  配置文件: package.json

一、说明

1. 项目采用SASS
2. Material-UI 进行UI控件插件
3. 采用HashRouter 路由进行路由管控

二、易错点

1. ES6 中返回的之组件类中必须要一个公开类

   export default class 类

然后在引用的时候

    import 类 from "../路径";

二、基础知识

三、异步加载路由

1）导入必须的组件 react-router-dom

  import {
    HashRouter as Router,
    Route,
    Redirect
} from 'react-router-dom'

2）使用路由
  我发现React 的路由是从上到下依次执行的

 <Route exact path="/"/>
 <!-- 重定向 -->
 <Redirect to="/login"/>
 <Route path="/login" render={() => (
    <Bundle 
        load={require("bundle-loader!./login.component/login.component")}>
    </Bundle>)}/>
 <Route path="/index" render={() => (
    <Bundle 
        load={require("bundle-loader!./index.component/index.component")}>
    </Bundle>)}/>

Bundle 是什么? require? bundle-loader!?
React 15.6 的版本里面对路由也进行了一个新的定义, 很多地方都是老旧的配置, 因此我在找到了一个官网地址
reacttraining.com 在里面进行了说明
 bundle-loader 是一个webpack 的插件专门用于 拆分代码 , 返回一个异步加载对象, 里面包含了加载对象的信息.
 require 大家都知道吧, 简单概述就是加载JS 使用的方法

Bundle 代码

/*
 * 异步渲染组件
 */
class Bundle extends React.Component {

    componentWillMount() {
        this.setState({
            name: '河马笔记'
        });
        this.load(this.props)
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.load !== this.props.load) {
            this.load(nextProps)
        }
    }

    load(props) {
        this.setState({
            mod: null
        })
        props.load((mod) => {
            this.setState({
                mod: mod.default ? mod.default : mod
            })
        })
    }

    render() {
        if (this.state.mod != null) {
            return this.state.mod.prototype.render();
        }
        return this.state.mod;
    }
}

回过头来在看Bundle 组件的内部，内部构造很简单。首先看 render 方法，用户渲染一个组件，而 mod 对象是NULL 则返回NULL, 然后当程序执行了 load 方法，传进来的是一个 bundle-loader 对象，这个对象loader对象有一个 load 方法进行加载异步加载JS 然后回调传入的函数。mod: mod.default ? mod.default : mod 将值赋值给了React 组件的 State 下的mod 则这个时候React 发现mod 值发生了变化然后就重新渲染。