基础看完了，现在来记录一下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 />传入就可以了。

react入门学习(二)

react入门学习(二)

state

props

推荐阅读更多精彩内容