React 笔记
环境介绍:
- Webpack: 3.2.0
- React: 15.6.1
配置文件:package.json
一、说明
- 项目采用SASS
- Material-UI 进行UI控件插件
- 采用HashRouter 路由进行路由管控
二、易错点
- 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 值发生了变化然后就重新渲染。
