基础看完了，现在来记录一下state和props
state
class listData extends React.Component{
//es6 的 语法，详情请出门右转看ES6
constructor(...props){
super(...props)
//也就这个state这个没有用react自己的getInitialState
this.state = {
testState:true
}
}
//其他的react生命周期照样可以使用，不过，注意没有逗号~
componentDidMount(){
// ajax code balabala
}
changeState(){
this.setState({
testState: !this.state.testState
},()=>{
//这个是setState的第二个参数，也就是一个function，就是一个回调函数，在state修改完之后，你想做的事情就可以放在这里
console.log(this.state.testState);
//如果不是在setState的回调里打印state的话，是没有改变之前的state，因为setState是异步操作
})
}
render(){
return(
<div onClick = {this.changeState.bind(this)}>测试那么一下</div>
)
}
}
上面是示例代码，现在来BB一下相关东西
state呢，个人理解，是一个全局的超级大对象，也就是react提倡的虚拟dom的根本（我这么理解的，键盘侠勿扰）
可以把任何东西挂载在state中，当然后通过setState改变你要改变的state相应属性，react会自己帮你判断你在引用该state的地方是否需要更新。
那么问题来了，如果你频繁操作state，小的倒还好，ajax返回后的state一般数据量比较大，如何处理？总不能每次都要比对全部的state，对吧？
如果你遇到了，届时请记得拆分，也就是把这种数据量大的state单独拎出去创建一个新的组件类。然后使用react生命周期中的 shouldComponentUpdate 。
生命周期相关，会在后面整理，这里提一下。使用详情，先自行查一下吧。
设置state还可以使用
setState((prevState,props)=>{
fuck:!prevState.fuck
}) // props不用的时候可以不传
props
props是父子组件之间传值
let Parent = React.createClass({
getInitialState({
return{
tabIndex:1
}
}),
render(){
return(
<div>
<Child parent = {this}/>//把需要传给子组件的东西放在这里，可以直接把父组件的this传给子组件
</div>
)
}
});
let Child = React.createClass({
render(){
return(
<div>{this.props.parent.state.tabIndex}</div> //this.props.parent取到的就是父组件传过来的this,父组件的this都拿到了，那么父组件里的其他东西也就可以拿到了。
//也可以传其他的，类似于回调等
)
}
})
再补一种写法
{
this.state.dialogShow ?
<Dialog title="title" content="content"
sureCall={this.sure.bind(this)} cancelCall = {()=>this.setState({dialogShow:false})}>
<input className="addTagNameInput" value={this.state.editInput} defaultValue="" placeholder="请输入名称" onChange={(e)=>{this.setState({editInput:e.target.value})}}/>
</Dialog> : null
}
因为这里只是负责展示，并没有什么逻辑，所以没有使用class Dialog extends React...来编写
这种是普通的无状态组件
props是父级调用的时候传入的所有
function Dialog(props){
//从传入的props里解构出来需要的东西
const{title,sureCall,cancelCall,children,content=""} = props;
return (
<div className={content ? content + " cover" : "cover"}>
<div className="delDialog">
<div className="dialogTitle">
<p>{title}</p>
<span onClick = {cancelCall}></span>
</div>
<div className="dialogCon" >
{children}
</div>
<div className="dialogBtn">
<span className="sure" onClick = {sureCall}>
确定
</span>
<span className="cancel" onClick = {cancelCall}>
取消
</span>
</div>
</div>
</div>
)
}
这里的children，是<Dialog></Dialog>标签中间的东西，可以是元素标签也可以是文字
如果不需要额外的children,可以直接<Dialog />传入就可以了。
