react-redux开发笔记

Warning: React.createElement: type should not be null, undefined, boolean, or number.

解决：https://codereviewvideos.com/blog/warning-react-createelement/
最基础的语法问题：他们之间的区别{}
import { Posts } from '../components/Posts';
import Posts from '../components/Posts';

2.页面跳转

import { browserHistory } from 'react-router'
browserHistory.push('/some/path')

3.不带参数和带参数的方法

constructor{
super(props)
this.noparams1 = this.noparams1.bind(this)
this.noparams2 = this.noparams2.bind(this)
}
noparams1(){
...
}
noparams2(e){
...
}
params(a1){
...a1...
}
render:function(){
return(
<div>
<p onClick={this.noparams1}>noparams1</p>
<p onClick={this.noparams2}>noparams2</p>
<p onClick={this.noparams1.bind(this,a1)}>params</p>
</div>
);
}

4.componentWillReceiveProps
>this.setState 可以写在这里面
[官方说明参考](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate)
此方法要注意 在里面写多个action有可能会死循环，因此要做很多判断

5.Webpack打包ES6以及ES7和CommonJs混合React
>[Webpack打包](http://www.onmpw.com/tm/xwzj/web_157.html)
ES7的特性 需要

install babel-preset-stage-0 --save-dev

然后在webpack.config.js加上 stage-0：

query:{
presets:['es2015','react','stage-0']
}

6.fetch send cookie
>默认情况下fetch不支持发送cookies 因此 后台可能读不到session 因此需要加上credentials: 'same-origin'

fetch('/users', { credentials: 'same-origin'})

https://github.com/github/fetch/blob/c23c3f9b3aa3e2bcc8853cc0b1b08830068e6163/README.md#sending-cookies

>>Sending cookies
To automatically send cookies for the current domain, the credentials
 option must be provided:

>>This option makes fetch
 behave similar to XMLHttpRequest with regards to cookies. Otherwise, cookies won't get sent, resulting in these requests not preserving the authentication session.
Use the include
 value to send cookies in a [cross-origin resource sharing](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) (CORS) request.
fetch('https://example.com:1234/users', { credentials: 'include'})

7.dispatch not found
>如果使用mapdispatchtoprops需要加上dispatch

var mapDispatchToProps = function(dispatch){
return {
addCompany: function(company){ dispatch(addCompany(company)); },
dispatch //其他地方才可以使用dispatch
}
};

8.ref 使用
checkbox

handleChange(e, key){
    console.log(key)
    console.log(this.refs.inputcheckbox.checked)
    }
render() {
        return (
            <div className="PurCartdiv">
                <input type="checkbox" ref="inputcheckbox" onChange={this.handleChange.bind(this, key)}/>
            </div>
)
}