React:创建管理后台项目demo

import React, { Component } from ‘react‘

import { HashRouter, Switch, Route } from ‘react-router-dom‘

import home from ‘@/pages/home/home‘
import login from ‘@/pages/login/login‘

export default class RouteConfig extends Component {
    render() {
        return (
            <HashRouter>
                <Switch>
                    <Route path=‘/‘ exact component={login} />
                    <Route path="/login" exact component={login}/>
                    <Route path="/home" exact component={home}/>
                </Switch>
            </HashRouter>
        )
    }
}

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import Route from ‘./router/‘
import * as serviceWorker from ‘./serviceWorker‘;

import ‘./assets/css/index.css‘
const render = Component => {
  ReactDOM.render(
    <Component />,
    document.getElementById(‘root‘))
}
render(Route)

if (module.hot) {
  module.hot.accept(‘./router/‘, () => {
    render(Route)
  })
}

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

npm install immutable

import React, { Component } from ‘react‘
import { is, fromJS } from ‘immutable‘
class Home extends Component {
    state = {
        name: ‘wql‘
    }
    componentWillMount () {
        // 组件初始化时调用，更新不调用，整个生命周期只有一次，可以修改state
        this.setState({
            name: ‘wql123‘
        })
    }
    componentDidMount () {
        // 组件渲染之后调用，只能调用一次
        console.log(‘componentDidMount‘)
    }
    componentWillReceiveProps () {
        // 组件初始化不调用，组件接收新的props时调用
    }
    componentWillUpdate () {
        // 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点
    }
    componentWillUnmount () {
        // 组件将要卸载时调用，一些事件监听和定时器需要在此时清除
    }
    shouldComponentUpdate (nextProps, nextState) {
        // 组件判断是否需要重新渲染时调用
        // fromJS: 将纯 JS 对象和数组深层转换为不可变映射和列表
        // is: 判断是否值相等
        console.log(!is(fromJS(this.props),fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)))
        return !is(fromJS(this.props),fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    }
    deal = (val) => {
        console.log(val)
        this.setState({
            name: val
        })
    }
    render () {
        return (
            <div>
                <div>11{this.state.name}</div>
                <a onClick={this.deal.bind(this,‘12123‘)}>click it</a>
            </div>
        )
    }
}
export default Home

const path = require(‘path‘)

module.exports = function override (config,env) {
    config.resolve.alias = {
        ...config.resolve.alias,
        ‘@‘: path.resolve(__dirname, ‘src‘)
    }
    return config
}