React基础知识备忘

section-1

//react组件
export class Halo extends React.Component{
    constructor(...args){
        super(...args); //初始化父类构造函数
        this.state={ //设置state
            text:""
        }
    }
    hello(ev){
       this.setState({ //修改state
           text:ev.target.value
       })
    }
    render(){
        return(
              {/*只能一个父元素包裹*/}
              <div>
                  {/*事件大小写注意 onChange onClick*/}
                  <input type="text" onChange= {this.hello.bind(this)}/>
                  <span>{this.state.text}</span>
              </div>
        )
    }
}

section-2

export class Halo extends React.Component{
    constructor(...args){
        super(...args);
        this.state={
            display:"block"
        }
    }
    toggle(){
       this.setState({
            display:this.state.display==="none" ? "block":"none"
       })
    }
    render(){
        return(
              <div>
                  <input type="button" value="切换" onClick={this.toggle.bind(this)}/>
                  {/*class在JSX中需要改成className*/}
                  {/*行内样式需要加两个花括号*/}
                  <span className="content" style={{display:this.state.display}}>内容的显示和隐藏</span>
              </div>
        )
    }
}

section-3

export class Halo extends React.Component{
    constructor(...args){
        super(...args);
        this.state={
            h:0,
            m:0,
            s:0
        };
        setInterval(function(){
            this.update();
        }.bind(this),1000)
    }
    update(){
        let date=new Date();
        this.setState({
            h:date.getHours(),
            m:date.getMinutes(),
            s:date.getSeconds()
        })
    }
    componentDidMount(){
        this.update();
    }
    render(){
        return(
              <div>
                  {this.state.h}:{this.state.m}：{this.state.s}
              </div>
        )
    }
}

section-4

/*react 生命周期*/
componentWillMount()   创建前
componentDidMount()    创建后
componentWillUpdate()  更新前
componentDidUpdate()   更新后
componentWillUnMount() 销毁前
componentWillReceiveProps(nextProps){
  // ???
}
shouldComponentUpdate(){
    //返回boolean值 默认每次状态更改时重新渲染
    //返回false componentWillUpdate()，render()和componentDidUpdate()将不会被调用
}

section-5

//组件的另一种写法 无状态state组件
//Es6 React.Component  Es5 React.createClass 其他两种定义方式
let Item=function(props){
    return <li>{props.value}</li>
};
export class Halo extends React.Component{
    constructor(...args){
        super();
        this.state={
            arr:[1,2,3,4,5]
        }
    }
    addItem(){
        this.setState({
            arr:this.state.arr.concat([Math.random()])
        })
    }
    render(){
        let result=[],arr=this.state.arr;
        for(var i=0;i<arr.length;i++){
            {/*需要给每个Item增加unique key唯一标识*/}
            result.push(<Item key={i} value={arr[i]} />)
        }
        return(
          <div>
              <input type="button" value="增加Item" onClick={this.addItem.bind(this)}/>
              <ul>
                  {result}
              </ul>
          </div>
        )
    }
}