Bruce Chen's Blog

var fragment = document.createDocumentFragment();

var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);

var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);

document.getElementById('fruit').appendChild(fragment);

setTimeout(function () {
    console.log(1);
});

new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})

2
3
1

┌───────────────────────┐
┌─>│        timers         │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
│  │     I/O callbacks     │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
│  │     idle, prepare     │
│  └──────────┬────────────┘      ┌───────────────┐
│  ┌──────────┴────────────┐      │   incoming:   │
│  │         poll          │<──connections───     │
│  └──────────┬────────────┘      │   data, etc.  │
│  ┌──────────┴────────────┐      └───────────────┘
│  │        check          │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
└──┤    close callbacks    │
   └───────────────────────┘

const server = net.createServer(() => {}).listen(8080);

server.on('listening', () => {});

setTimeout(() => {
    console.log('timeout');
}, 0);

setImmediate(() => {
    console.log('immediate');
});

const fs = require('fs');

fs.readFile(__filename, () => {
    setTimeout(() => {
        console.log('timeout');
    }, 0);
    setImmediate(() => {
        console.log('immediate');
    });
});

immediate
timeout

function Menu() {
}

Menu.prototype.show = function() {
}

Array.prototype.unique = function() {
    // 将 array 中的重复元素去除
}

export default Menu;

function Menu() {
}

Menu.prototype.show = function() {
}

var a = 'Arr' + 'ay'
var b
if(a == 'Array') {
    b = Array
} else {
    b = Menu
}

b.prototype.unique = function() {
    // 将 array 中的重复元素去除
}

export default Menu;

let module;



if(condition) {

    module =  require("HellowModule") ;

} else {

    module = requitre('BeyModule');

}

import hello from "Hellow";

import bey from "Bey";

import other from "Other"



if(condition) {

    // hello

} else {

    // bey

}

const childProcess = require('child_process')
const cpuNum = require('os').cpus().length

for (let i = 0; i < cpuNum; ++i) {
  childProcess.fork('./worker.js')
}

console.log('Master: Hello world.')

console.log('Worker-' + process.pid + ': Hello world.')

const childProcess = require('child_process')
const worker = childProcess.fork('./worker.js')

worker.send('Hello world.')

worker.on('message', (msg) => {
  console.log('[Master] Received message from worker: ' + msg)
})

process.on('message', (msg) => {
  console.log('[Worker] Received message from master: ' + msg)
  process.send('Hi master.')
})

const childProcess = require('child_process')
const net = require('net')
const cpuNum = require('os').cpus().length

// 创建工作进程
let workers = []
let cur = 0
for (let i = 0; i < cpuNum; ++i) {
  workers.push(childProcess.fork('./worker.js'))
  console.log('Create worker-' + workers[i].pid)
}

// 创建TCP服务器
const server = net.createServer()

// 服务器收到请求后分发给工作进程去处理
// 通过轮转方式实现工作进程的负载均衡
server.on('connection', (socket) => {
  workers[cur].send('socket', socket)
  cur = Number.parseInt((cur + 1) % cpuNum)
})

server.listen(8080, () => {
  console.log('TCP server: 127.0.0.1:8080')
})

process.on('message', (msg, socket) => {
  if (msg === 'socket' && socket) {
    // 利用setTimeout模拟处理请求时的操作耗时
    setTimeout(() => {
      socket.end('Request handled by worker-' + process.pid)
    }, 10)
  }
})

const net = require('net')
const maxConnectCount = 10

for (let i = 0; i < maxConnectCount; ++i) {
  net.createConnection({
    port: 8080,
    host: '127.0.0.1'
  }).on('data', (data) => {
    console.log(data.toString())
  })
}

const childProcess = require('child_process')
const net = require('net')
const cpuNum = require('os').cpus().length

// 创建工作进程
let workers = []
let cur = 0
for (let i = 0; i < cpuNum; ++i) {
  workers.push(childProcess.fork('./worker.js'))
  console.log('Create worker-' + workers[i].pid)
}

// 创建TCP服务器
const server = net.createServer()

server.listen(8080, () => {
  console.log('TCP server: 127.0.0.1:8080')
  // 监听端口后将服务器句柄发送给工作进程
  for (let i = 0; i < cpuNum; ++i) {
    workers[i].send('server', server)
  }
  // 关闭主线程服务器的端口监听
  server.close()
})

process.on('message', (msg, server) => {
  if (msg === 'server' && server) {
    server.on('connection', (socket) => {
      // 利用setTimeout模拟处理请求时的操作耗时
      setTimeout(() => {
        socket.end('Request handled by worker-' + process.pid)
      }, 10)
    })
  }
})

const childProcess = require('child_process')
const net = require('net')
const cpuNum = require('os').cpus().length - 1

// 创建工作进程
let workers = []
let cur = 0
for (let i = 0; i < cpuNum; ++i) {
  workers.push(childProcess.fork('./worker.js'))
  console.log('Create worker-' + workers[i].pid)
}

// 创建TCP服务器
const server = net.createServer()

// 由于master进程也会监听端口。因此需要对请求做出处理
server.on('connection', (socket) => {
  // 利用setTimeout模拟处理请求时的操作耗时
  setTimeout(() => {
    socket.end('Request handled by master')
  }, 10)
})

server.listen(8080, () => {
  console.log('TCP server: 127.0.0.1:8080')
  // 监听端口后将服务器句柄发送给工作进程
  for (let i = 0; i < cpuNum; ++i) {
    workers[i].send('server', server)
    // 工作进程退出后重启
    workers[i].on('exit', ((i) => {
      return () => {
        console.log('Worker-' + workers[i].pid + ' exited')
        workers[i] = childProcess.fork('./worker.js')
        console.log('Create worker-' + workers[i].pid)
        workers[i].send('server', server)
      }
    })(i))
  }
  // 关闭主线程服务器的端口监听
  // server.close()
})

process.on('message', (msg, server) => {
  if (msg === 'server' && server) {
    server.on('connection', (socket) => {
      // 利用setTimeout模拟处理请求时的操作耗时
      setTimeout(() => {
        socket.end('Request handled by worker-' + process.pid)
      }, 10)
    })
  }
})

const http = require('http')
const httpServer = http.createServer((req, res) => {
  // 利用setTimeout模拟处理请求时的操作耗时
  setTimeout(() => {
    res.writeHead(200, { 'Content-Type': 'text/plain' })
    res.end('Request handled by worker-' + process.pid)
  }, 10)
})

process.on('message', (msg, server) => {
  if (msg === 'server' && server) {
    server.on('connection', (socket) => {
      // 提交给HTTP服务器处理
      httpServer.emit('connection', socket)
    })
  }
})

const cluster = require('cluster')

if (cluster.isMaster) {
  const cpuNum = require('os').cpus().length

  for (let i = 0; i < cpuNum; ++i) {
    cluster.fork()
  }

  // 创建进程完成后输出提示信息
  cluster.on('online', (worker) => {
    console.log('Create worker-' + worker.process.pid)
  })

  // 子进程退出后重启
  cluster.on('exit', (worker, code, signal) => {
    console.log('[Master] worker ' + worker.process.pid + ' died with code: ' + code + ', and signal: ' + signal)
    cluster.fork()
  })
} else {
  const net = require('net')
  net.createServer().on('connection', (socket) => {
    // 利用setTimeout模拟处理请求时的操作耗时
    setTimeout(() => {
      socket.end('Request handled by worker-' + process.pid)
    }, 10)
  }).listen(8080)
}

$ git co currentBranch
$ git pull origin currentBranch
$ git co ./

$ git branch currentBranchBackUp

$ git reset --hard resetVersionHash //将当前branch的HEAD指针指向commit hash

$ git push origin :currentBranch
$ //或者这么写git push origin --delete currentBranch

$ git push origin currentBranch

$ git reset --hard resetVersionHash

$ git push -f origin currentBranch

$ git revert resetVersionHash

$ git push origin currentBranch

$ git co resetVersionHash

$ git co -b newRevertedHash

$ git co currentBranch
$ git merge newRevertedHash

const Koa = require('koa');

const app = new Koa();
const PORT = 3000;

// #1
app.use(async (ctx, next)=>{
    console.log(1)
    await next();
    console.log(1)
});
// #2
app.use(async (ctx, next) => {
    console.log(2)
    await next();
    console.log(2)
})

app.use(async (ctx, next) => {
    console.log(3)
})

app.listen(PORT);
console.log(`http://localhost:${PORT}`);

1
2
3
2
1

listen(...args) {
    debug('listen');
    const server = http.createServer(this.callback());
    return server.listen(...args);
}

callback() {
    const fn = compose(this.middleware);

    if (!this.listeners('error').length) this.on('error', this.onerror);

    const handleRequest = (req, res) => {
      const ctx = this.createContext(req, res);
      return this.handleRequest(ctx, fn);
    };

    return handleRequest;
}

this.middleware = [];

use(fn) {
    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
    if (isGeneratorFunction(fn)) {
      deprecate('Support for generators will be removed in v3. ' +
                'See the documentation for examples of how to convert old middleware ' +
                'https://github.com/koajs/koa/blob/master/docs/migration.md');
      fn = convert(fn);
    }
    debug('use %s', fn._name || fn.name || '-');
    this.middleware.push(fn);
    return this;
}

use(fn) {
    this.middleware.push(fn);
    return this;
}

function compose (middleware) {
  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)

    function dispatch (i) {
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      let fn = middleware[i]
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

return Promise.resolve(fn(context, function next () {
      return dispatch(i + 1)
}))

1. 将`context`一路传下去给中间件

2. 将`middleware`中的下一个中间件`fn`作为未来`next`的返回值

createContext(req, res) {
   const context = Object.create(this.context);
   const request = context.request = Object.create(this.request);
   const response = context.response = Object.create(this.response);
   context.app = request.app = response.app = this;
   context.req = request.req = response.req = req;
   context.res = request.res = response.res = res;
   request.ctx = response.ctx = context;
   request.response = response;
   response.request = request;
   context.originalUrl = request.originalUrl = req.url;
   context.cookies = new Cookies(req, res, {
     keys: this.keys,
     secure: request.secure
   });
   request.ip = request.ips[0] || req.socket.remoteAddress || '';
   context.accept = request.accept = accepts(req);
   context.state = {};
   return context;
 }

 handleRequest(ctx, fnMiddleware) {
   const res = ctx.res;
   res.statusCode = 404;
   const onerror = err => ctx.onerror(err);
   const handleResponse = () => respond(ctx);
   onFinished(res, onerror);
   return fnMiddleware(ctx).then(handleResponse).catch(onerror);
 }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    function foo(params) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            JSON.parse('{{');
            return resolve(params);
          } catch (e) {
            return reject(e);
          }
        }, 1000);
      })
    }

    // ========doing======
    function autoTry(fn, times) {
      const retry = (params) => new Promise((resolve, reject) => {
        fn(params).then(
          (response) => { resolve(response) }
        ).catch(e => {
          console.log('retrying: ' + new Date(), e)
          if (times > 1) {
            times -= 1
            retry()
          } else { reject(e) }
        })
      })

      return retry
    }

    // ========test======
    func = autoTry(foo, 3);
    func({ a: 1, b: 2 }).then((res) => {
      console.log(`结果：${JSON.stringify(res)}`);
    }, (error) => {
      console.log(error)
    });

  </script>
</body>

</html>

function lookup(str,key){
  if(typeof str !='string'||key<1)return -1;
  let value = str.split("").sort()[key-1];
  return str.indexOf(value);
}
console.log(lookup('asasdskdjdfgnsdkfnmsASDdf',5)+1)

let getIndexChar = (str,index)=>{
    let sortChar = []
    for(let i=0;i<str.length;i++) {
        sortChar.push(str.charCodeAt(i))
    }
    sortChar = sortChar.sort((a,b)=>{
        return a-b
    })

    let indexCode = -1
    for(let i=0;i<str.length;i++) {
        if(str[i].charCodeAt(0)==sortChar[index]) {
            indexCode = i
        }
    }

    return indexCode
}
getIndexChar('asdEQW',1) //4

type GetOnlyFnKeys<T extends object> = {
 [Key in keyof T]: T[K] extends Function ? K : never
}

type GetOnlyFnProps<T extends object> = {
 [K in GetOnlyFnKeys<T>]: T[K]
}

type UnGenericPromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never

import React, { Component } from 'react';
import {PREFIX_URL ,request ,TITLE} from '../../common';
import DetailedList from "../../components/movie/DetailedListComponent";
import Loading from '../../components/common/LoadingComponent';

const PS = 5;
class FilmList extends Component {
    constructor(...args) {
        super(...args);
        document.title = '艾米电影推荐';
        this.stgId = localStorage.getItem("stgId") || "";
        this.id = this.props.match.params.id;
        this.state = {
            listData: "",
            page: 1,
            pageSize: PS,
            hasMore: false,
            desc:'',
            loading:true,
            display:'none'
        };
    }
    async componentWillMount() {
        // console.log("片单ID-->", this.id);
        await this.getList();
    }
    async getList(page=1) {
        let url = `${PREFIX_URL}movie_client/list`+
            `?stgId=${this.stgId}&movieListId=${this.id}&page=${page}&pageSize=${this.state.pageSize}`;
        let res = await request(url);
        if (res && res.success) {
            document.title = res.title;
            let listData = "";
            if (page === 1) {
                listData = res.data;
            } else {
                listData = this.state.listData;
                listData = listData.concat(res.data);
            }
            await this.setState({
                listData,
                loading:false,
                display:'block',
                desc:res.desc,
                page:res.page.current,
                hasMore: res.page.current < res.page.pages
            });
        }
    }
    async componentWillUnmount () {
        document.title = TITLE;
    }
    async refresh () {
        await this.setState({page: 1});
        await this.getList(1);
    }
    async loadMore() {
        await this.setState({page: this.state.page + 1});
        await this.getList(this.state.page);
    }
    render() {
        return (
            <div className="page-movie-detailed-list">
                {
                    !!this.state.listData &&
                    <DetailedList
                        refresh={this.refresh.bind(this)}
                        loadMore={this.loadMore.bind(this)}
                        hasMore={this.state.hasMore}
                        listData={this.state.listData}
                        desc={this.state.desc}
                        style={{'display':this.state.display}}/>}
                {this.state.loading ? <Loading/> : '' }
            </div>
        );
    }
}

export default FilmList;

import { Button, Col, message as Message, Row, Icon } from 'antd'
import { Link } from 'react-router-dom'
import React from 'react'
import MessageListFilter, { IMessageListFilter } from './components/MessageListFilter'
import MessageListTable from './components/MessageListTable'
import MessageService from '../../../service/driverManage/MessageService'

export default class MessageList extends React.Component {
  // public constructor(props: any){
  //   super(props)
  // }
  public state = {
    filterProps: {
      filter: {
        beginCreatedTime: '',
        endCreatedTime: '', // 日期
        sendStatus: '-1', //发送状态
      },
    },
    tableProps: {
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      data: [],
    },
    searching: false,
  }

  public componentDidMount() {
    this.reSearch()
  }

  public filterChange = (params: IMessageListFilter) => {
    this.setState({
      filterProps: {
        filter: {
          ...this.state.filterProps.filter,
          ...params,
        },
      },
    })
  }

  public search = async () => {
    this.setState({
      searching: true,
    })
    const { code, message, data } = await MessageService.pageMessageList({
      ...this.state.filterProps.filter,
      ...{
        sendStatus:
          this.state.filterProps.filter.sendStatus !== '-1'
            ? this.state.filterProps.filter.sendStatus
            : null,
      },
      pageNum: this.state.tableProps.page.current,
      pageSize: this.state.tableProps.page.pageSize,
    })
    this.setState({
      searching: false,
    })
    if (code !== 200) {
      Message.error(message)
      return
    }
    const { current, pageSize } = this.state.tableProps.page
    let rows = []
    rows =
      data.rows && data.rows.length
        ? data.rows.map((item: any, index: number) => {
            return {
              ...item,
              num: (current - 1) * pageSize + index + 1,
            }
          })
        : []
    this.setState({
      tableProps: {
        page: {
          ...this.state.tableProps.page,
          total: data.total,
        },
        data: rows,
      },
    })
  }

  public reSearch = () => {
    const { tableProps } = this.state
    const {
      page: { pageSize, total },
    } = tableProps

    this.setState(
      {
        tableProps: {
          ...tableProps,
          page: {
            pageSize,
            total,
            current: 1,
          },
        },
      },
      () => {
        this.search()
      }
    )
  }

  public pageChange = (page: object) => {
    this.setState({
      tableProps: {
        ...this.state.tableProps,
        page,
      },
    })
    this.search()
  }

  public getDetail = (params: any) => {
    ;(this.props as any).history.push('messageDetail', { id: 6, type: 0 })
  }
  public render() {
    const { filterProps, tableProps, searching } = this.state
    return (
      <section>
        <MessageListFilter
          loading={searching}
          {...filterProps}
          onChange={this.filterChange}
          onSearch={this.reSearch}
        ></MessageListFilter>
        <Row style={{ marginBottom: '10px' }}>
          <Col>
            <Button type="primary">
              <Link to={`/fast/message/messageCreate`}>
                <Icon type="plus" />
                <span style={{ marginLeft: '8px' }}>新建推送</span>
              </Link>
            </Button>
          </Col>
        </Row>
        <MessageListTable
          {...tableProps}
          onPagechange={this.pageChange}
          getDetail={this.getDetail}
          onSearch={this.search}
          loading={searching}
        ></MessageListTable>
      </section>
    )
  }
}

import { Button, Table, Col, Modal, message as Message } from 'antd'
import React from 'react'
import { PaginationConf } from '../../../../config/antd/PaginationConf'
import { Link } from 'react-router-dom'
import MessageService from '../../../../service/driverManage/MessageService'
export interface IMessageTable {
  num: string | number
  creatTime: string
  driverName: string
  driverPhoneNum: string
  receiptType: number
  receipt: number | string
  output: number | string
  banace: number | string
}
export interface IProps {
  data: IMessageTable[]
  page: {
    current: number
    pageSize: number
    total: number
  }
  onPagechange?: (page: { current: number; pageSize: number; total: number }) => void
  getDetail: (param: any) => void
  onSearch: () => void
  loading: boolean
}

const { confirm } = Modal
class MessageListTable extends React.Component<IProps> {
  public constructor(props: IProps) {
    super(props)
    ;(this as any).columns = [
      {
        title: '序号',
        dataIndex: 'num',
        align: 'center',
      },
      {
        title: '发送时间',
        dataIndex: 'sendTime',
        align: 'center',
      },
      {
        title: '发送范围',
        dataIndex: 'sendScope',
        align: 'center',
      },
      {
        title: '消息中心',
        dataIndex: 'canIntoMessageCenter',
        align: 'center',
      },
      {
        title: '标题',
        dataIndex: 'title',
        align: 'center',
      },
      {
        title: '操作人',
        dataIndex: 'createdBy',
        align: 'center',
      },
      {
        title: '创建时间',
        dataIndex: 'createdTime',
        align: 'center',
      },
      {
        title: '发送状态',
        dataIndex: 'sendStatus',
        align: 'center',
      },
      {
        title: '操作',
        align: 'center',
        render(row: any) {
          return (
            <div>
              {row.canCancelSend ? (
                <Col>
                  <Button
                    type="primary"
                    onClick={() => {
                      cancel(row)
                    }}
                  >
                    取消发送
                  </Button>
                  {new Date(row.sendTime).getTime() - new Date().getTime() > 5 * 60 * 60 * 1000 ? (
                    <Button type="primary" style={{ marginLeft: '5px' }}>
                      <Link to={`/fast/message/messageUpdate/${row.id}`}>查看</Link>
                    </Button>
                  ) : (
                    <Button type="primary" style={{ marginLeft: '5px' }}>
                      <Link to={`/fast/message/messageDetail/${row.id}`}>查看</Link>
                    </Button>
                  )}
                </Col>
              ) : (
                <Button type="primary">
                  <Link to={`/fast/message/messageDetail/${row.id}`}>查看</Link>
                </Button>
              )}
            </div>
          )
        },
      },
    ]
    function cancel(row: any) {
      const { onSearch } = props
      if (new Date(row.sendTime).getTime() - new Date().getTime() > 5 * 60 * 60 * 1000) {
        confirm({
          title: '提示',
          content: '是否确认取消',
          async onOk() {
            const { code, message } = await MessageService.messageCancel(row.id)
            if (code !== 200) {
              Message.error(message)
              return
            }
            Message.success('取消成功')
            onSearch()
          },
          onCancel() {
            return
          },
        })
      } else {
        Modal.info({
          title: '提示',
          content: <div>距离预计发送时间不到5分钟 禁止取消</div>,
          okText: '关闭',
        })
      }
    }
  }
  public render() {
    const { data, page, onPagechange, loading } = this.props
    return (
      <section>
        <Table
          dataSource={data}
          loading={loading}
          // @ts-ignore
          columns={this.columns}
          rowKey={'id'}
          size={'middle'}
          // scroll={{ x: 2500 }}
          pagination={{
            ...PaginationConf,
            ...this.props.page,
            onChange: (toCurrent, pageSize) => {
              page.current = toCurrent
              page.pageSize = pageSize as number

              if (onPagechange) {
                onPagechange(page)
              }
            },
            onShowSizeChange: (current, toPageSize) => {
              page.current = current
              page.pageSize = toPageSize

              if (onPagechange) {
                onPagechange(page)
              }
            },
            showTotal: (total: number) => `共计 ${total} 条`,
          }}
        ></Table>
      </section>
    )
  }
}

export { MessageListTable }
export default MessageListTable

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

shouldComponentUpdate(nextProps, nextState) {
    return (nextState.person !== this.state.person);
  }

import React, { PureComponent } from 'react';

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      isShow: false
    };
    console.log('constructor');
  }
  changeState = () => {
    this.setState({
      isShow: true
    })
  };
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>{this.state.isShow.toString()}</div>
      </div>
    );
  }
}

import React, { PureComponent } from 'react';

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      arr:['1']
    };
    console.log('constructor');
  }
  changeState = () => {
    let { arr } = this.state;
    arr.push('2');
    console.log(arr);
    // ["1", "2"]
    // ["1", "2", "2"]
    // ["1", "2", "2", "2"]
    // ....
    this.setState({
      arr
    })
  };
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>
          {this.state.arr.map((item) => {
            return item;
          })}
        </div>
      </div>
    );
  }
}

import React, { PureComponent } from 'react';

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      arr:['1']
    };
    console.log('constructor');
  }
  changeState = () => {
    let { arr } = this.state;
    this.setState({
      arr: [...arr, '2']
    })
  };
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>
          {this.state.arr.map((item) => {
            return item;
          })}
          </div>
      </div>
    );
  }
}

//父组件
import React, { PureComponent, Component } from 'react';
import Example from "../components/Example";

class IndexPage extends PureComponent{
  constructor() {
    super();
    this.state = {
      person: {
        name: 'sxt'
      }
    };
    console.log('constructor');
  }
  changeState = () => {
    let { person } = this.state;
    person.name = 'sxt2';
    this.setState({
      person
    })
  };
  render() {
    console.log('IndexPage render');
    const { person } = this.state;
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <Example person={person} />
      </div>
    );
  }
}
//子组件
import React, { Component } from 'react';

class Example extends Component {

  render() {
    console.log('example render');
    const { person } = this.props;
    return(
      <div>
        {person.name}
      </div>
    );
  }
}

yarn add react-loadable
yarn add babel-plugin-syntax-dynamic-import

import React from "react";
import { Spin } from 'antd';
import Loadable from "react-loadable";

import './index.less'

// 加载动画
const loadingComponent = () => {
  return <div className={'spin-loading'}>
    <div><Spin size="large" /></div>
  </div>;
};

// 当不传加载动画时候使用默认的加载动画
export default (loader, loading = loadingComponent) => {
  return Loadable({
    loader,
    loading,
  });
};

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router, Route } from "react-router-dom";

import { createBrowserHistory } from "history";
import loadable from './utils/loadable'

const App = loadable(() => import("./router/login/App"));
const MoveVideo = loadable(() => import("./router/video"));
const UserReg = loadable(() => import("./router/userReg/index"));
const FoodList = loadable(() => import("./router/food/index"));

ReactDOM.render(
  <Router history={createBrowserHistory()}>
    <Route exact path="/" component={App} />
    <Route path="/user-reg/" component={UserReg} />
    <Route path="/food-list" component={FoodList} />
    <Route path="/video" component={MoveVideo} />
  </Router>,
  document.getElementById("root")
);

serviceWorker.unregister();