React

用 function 创造 component (无状态组件)

    function Clock(props){
        return (
            

                
Hello, world!
                
It is {props.date.toLocaleTimeString()}.
            
        );
    }
    function tick() {
        ReactDOM.render
            ReactDOM.render(, document.getElementById('root'));
        );
    }

    setInterval(tick, 1000);

用 Class 创造 component
State 只能存在于用Class 创造 component里

    class Clock1 extends React.Component{
        render(){
            return (
                

                    
Hello, world!
                    
It is {this.props.date.toLocaleTimeString()}.
                
            );
        }
    }
    function tick() {
        ReactDOM.render(
            ,
            document.getElementById('root')
        );
    }

    setInterval(tick, 1000);

---

React LifeCycle Method

reactLifeCycle.png

componentDidMount() {} //第一次render后会call
componentWillUnmount() {} // 马上unmount 用于回收资源等

---

Do Not Modify State Directly

this.state.comment = 'Hello'; // Wrong 只能在constractor里 state = " xxx " 
this.setState({comment: 'Hello'}); // Correct

---

//并不是立即执行 是一个异步的布置任务
// setState()---------render()之间运行
this.setState({ 
  counter: this.state.counter + this.props.increment,
}