标签：02 Square value react state 笔记 props 组件 构造函数

通过在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就会出现。

标签：02,Square,value,react,state,笔记,props,组件,构造函数
来源： https://www.cnblogs.com/wxhDaydream/p/16435073.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。