thinkjs结合react后端渲染

#thinkjs-react
###安装
1. 下载项目，个人用的是webstrom。
2. 打开项目，cmd中执行：npm install --registry=https://registry.npm.taobao.org --verbose
3. npm start 启动应用
4. view localhost:8369

###说明
1. development.js中有webpack2+的启动命令，目前是监控了文件变化（监控的话必须生成map文件，蛮大的），可以关闭--watch。
2. 由于使用的是thinkjs2.2.x，看了下thinkjs的watch-compile.js里对src的编译只限.js和.ts的文件才会编译到app目录。所以router目录下的后端要编译的文件都只用.js没有使用其它格式的文件。那个development.js的instance.compile配置没有什么参数可用
###完成任务情况
1. 导入所有相关模块
2. 可以在src中写jsx语法，对src/react的index.jsx进行webpack打包
3. ui使用amaze ui（妹子UI） npm install amazeui-react
4. less写在src/router/css里，使用webpack2+打包
5. 后端渲染，可以运行，页面完成header选项卡切换和登录登出操作
6. 暂不加入其它模块。这个做为一个基础项目。后续复制项目分别开。
7. 增加当有登录状态改变的时候首页会判断如果登录会fetch后端请求用户的登录信息。可参考containers/home.js。
componentDidMount方法不在后端执行，只在前端执行一次，
componentWillUpdate开始并不执行（初始化也不会执行），只当state状态改变时执行。以这个原理后端加载数据。（主要是处理一些登录后才执行的渲染。）
componentWillMount 方法会执行在后端（前端也会执行一次），可用此方法来取得和构造一些不用登录的信息（要注意的是状态来判断是否要加载信息）。
8. 使用webpack2+打包，分离css和js到独立文件。没有将react相关的js独立开，如要独立：修改webpack.config.js的entry.vendor并在入口html加入react相关代码
webpack2处理的方件按，文件后辍统一处理：
.es6用babel+webpack处理
.jsx用react+babel+webpack处理
.less用less+webpack处理
.js只用+webpack处理
.css只用+webpack处理
9. 发现header和footer等组件在没有更改值的时候也会有多次的render,使用react-immutable-render-mixin改造程序，减少重复无必要的渲染。
   可将footer.jsx以下内容注释掉：
```
    import { shouldComponentUpdate } from 'react-immutable-render-mixin';
   
      constructor(props) {
        super(props);
           this.shouldComponentUpdate = shouldComponentUpdate.bind(this);
    }
```
   并将以下内容注释去掉，登入登出时即可在打印台看到变化：
```
//console.log("又加载了一次");
```
10.react-redux.connet使用decorators方式连接controller,webpack打包时加入transform-decorators-legacy（decorators支持），及包:babel-plugin-transform-decorators-legacy
和core-decorators以支持通用的decorators（python中叫decorators，java中叫annotaion的东东）
11.替换amaze ui为ant design 加入自动导入包babel-plugin-import让antd的js和css按需加载（.babelrc里的是给后端渲染的，所以用不到css去掉了plugin的css部份导入）。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!