k8w.io
【草稿】全栈开发流程
2017-11-20作者:k8w

React + React Router + WebPack + Express的全栈开发流程。

React in TypeScript

绑定事件正确的写法

<a onClick={e=>{this.handleClick(e)}}>XXX</a>

<a onClick={this.handleClick.bind(this)}>XXX</a>

直接使用 onClick={this.handleClick} 有可能会出现this为null的错误(调用方this未知)

JQuery与React事件模块的差异

JQuery和React的事件系统相互独立,如$('XXX').change()并不能触发React的onchange
原生事件会触发两者,如XXX.dispatchEvent(new Event('change', {bubbles:true}));

TypeScript+Webpack导入AMD/CommonJS的包

//如果有.d.ts 可以直接import
import * as React from 'react';

//如果没有.d.ts 则可以
import 'XXX';
declare var require:any;  
require('XXX');

注意 require(string)是同步加载 require(array, callback)是异步加载
注意:异步加载的依赖不会被打包到CommonChunk

React-Router:在组件中取router

//不建议这么搞
static contextTypes = {
 router: React.PropTypes.object.isRequired
} 

//搞个全局变量比较好
 <Router ref={(r)=>Global.router=r.router}>

服务端渲染

RenderDomServer.renderToString()
前端使用ReactDom.render()再render一个一模一样的东西(props也要全部一致),此时不会重新渲染,只会绑定上事件 。

默认state

在构造函数中 this.state = …

默认props

static defaultProps = { … }

JQuery操作React的DOM的问题
使用JQuery如果改动了DOM,那么在React更新的时候可能会出错 比如做拖拽排序,如果用JQuery改动了DIV的顺序,但是React辨别顺序是根据data-reactid来的,所以会出现顺序不一样的情况。

前后台公用shared目录

如果引用了项目父文件夹的内容,那么编译出来的目录结构会变喔!(变成父级那样的了)
可以创建快捷方式: Windows: mklink /J Linux:ln -s
用WebStorm打开时,为了防止代码提示多处混淆,可以右键相应目录 > Mark as exclude

React中正确显示换行

//给显示文字的容器设置如下CSS
white-space: pre-wrap 

获取当前类的静态成员

类似PHP中的 self::, 可通过 this.constructor,如下

class MyClass{
    static MyStatic: string = 'MyStatic Value';

    getMyStatic(){
        return this.constructor['MyStatic']
    }
}

自定义Component,首字母一定要大写

const Test = props=><div>Test</div>
const test2 = props=><div>Test</div>

//首字母大写 可以被正常识别
<Test />    //编译出来是 React.createElement(Test,null);

//首字母小写 会被当做内置Component 无法正常识别
<test2 />   //编译出来是 React.createElement("test2",null);

Webpack

Webpack用BootStrap

通过node_modules加载

new webpack.ProvidePlugin({
 '$': "jquery",
 'jQuery': "jquery",
 'window.jQuery': "jquery",
 'window.$': 'jquery'
})

这样jQuery变成了全局了,在独立引入bootstrap.js就可以啦,可保障每个地方用到的$都是一样的。
或外部加载jquery

externals: {
        "jquery": "jQuery"
}

webpack-dev-server单页面应用调试配置

devServer:{
 hot: true,
 historyApiFallback: true,
 host: '0.0.0.0',
 proxy: {
     '/api/*': {
       target: '[http://la.livechart.cn](http://la.livechart.cn/)',
       changeOrigin: true
     }
 }
}

Webpack动态加载及公共模块提取

需要动态加载的模块,通过require(array,callback)加载
提取公共模块可以使用

//webpack.config.js
...
plugins:[
  new webpack.optimize.CommonsChunkPlugin()
]

但是默认是不会提取动态加载的模块中的公共部分的,要提取动态加载模块的公共部分,可以给CommonsChunkPlugin带上参数,如下:

new webpack.optimize.CommonsChunkPlugin({async:true, minChunks:2})

浏览器的坑

Chrome的AJAX请求在页面刷新时会错误的BUG

页面中的AJAX请求,在请求未完成时,刷新或跳转到其它网页,则会抛出错误,状态码为0。
假设你是用JQuery去请求的, $.ajax(…).done(…).fail(…),
如果在请求未完成的时候刷新或链去了其它页面,那么此时会触发fail!!
所以这种情况之下,不建议在fail里面使用alert,因为会阻塞住浏览器,必须点了确定才能继续。

NodeJS后端

从Git npm install

npm install git+[https://](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)[用户名](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)[:](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)[密码](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)[@github.com/npm/npm.git](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)

外部库

long

long.fromInt得出的可以用==判断,其它的只能用equals判断

const Long = require('long');
new Long(123) == new Long(123);  //false
Long.fromInt(123) == Long.fromInt(123);  //true
Long.fromString('123') == Long.fromString('123');  //false
(正文完)
留言(0条)
发表新留言
您的大名:
必填
电子邮箱:
不公开,仅用于向你发送回复