thinkjs结合react后端渲染

前端之家收集整理的这篇文章主要介绍了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部份导入)。

猜你在找的React相关文章