react入门学习(二)

基础看完了，现在来记录一下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(
　　　　　　
测试那么一下
　　　　)　　
　　}
}

上面是示例代码，现在来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(
　　　　　　

　　　　　　　　//把需要传给子组件的东西放在这里，可以直接把父组件的this传给子组件
　　　　　　
　　　　)
　　}
});
let Child = React.createClass({
　　render(){
　　　　return(
　　　　　　
{this.props.parent.state.tabIndex}
  //this.props.parent取到的就是父组件传过来的this,父组件的this都拿到了，那么父组件里的其他东西也就可以拿到了。
//也可以传其他的，类似于回调等
            )
　　}
})

再补一种写法

{
        this.state.dialogShow ? 
                
this.setState({dialogShow:false})}>
                        {this.setState({editInput:e.target.value})}}/>
                    
 : null
 }

因为这里只是负责展示，并没有什么逻辑，所以没有使用class Dialog extends React...来编写
这种是普通的无状态组件
props是父级调用的时候传入的所有

function Dialog(props){
    //从传入的props里解构出来需要的东西
    const{title,sureCall,cancelCall,children,content=""} = props;
    return (
         

            

                

                    
{title}
                    
                
                

                    {children}
                
                

                    
                        确定
                    
                    
                        取消
                    
                
            
        
    )
}

这里的children，是

标签中间的东西，可以是元素标签也可以是文字
如果不需要额外的children,可以直接

传入就可以了。