react学习笔记02

通过在React组件的构造函数中设置this.state来初始化state。this.state应该被视为一个组件的私有属性。在this.state中存储当前每个方格(Square)的值，并且在每次方格被点击的时候改变这个值。

class Square extends React.Component {
    constructor(props) {
        super(props);
//1.super()仅在具有构造函数的React组件内部被调用；
//2.但如果我们有一个构造函数，那么它super()是强制性的
        this.state = {
            value:null,
        }
    };

//1.render():是class组件中唯一必须实现的方法
//2.当render被调用时，它会检查this.props和this.state的变化并返回。
render() {
    return (
        <button className="square" onClick={() => console.log('click')}>
            {this.props.value}
        </button>
    )
}
}

注：在javaScript中，每次定义其子类的构造函数时，都需要调用super方法。因此，在所有含有构造函数的React组件中，构造函数必须以super(props)开头
修改一下Square组件的render方法，每当方格被点击的时候可以显示当前state的值：

1.在标签中，把this.props.value替换为this.state.value.

2.将 onClick={…}事件监听函数替换为 onClick={()=>this.setState({value:’X’})}

class Square extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
        }
    };

    render() {
        return (
            <button 
            className="square"
            onClick={() => {this.setState({value:'X'})}}
            >
                {this.state.value}
            </button>
        );
    }
}

在Square组件render方法中的onClick事件监听函数中调用this.setState,我们就可以在每次被点击的时候通知React去重新渲染Square组件。组件更新之后，Square组件的this.state.value的值会变为’X’,效果为在游戏棋盘上能看到X，点击任意一个方格X就会出现。