React 之内置方法setState改变state（一）

简述

this.setState 方法是React组件类（React.Component 的子类）的一个内置方法。当你在创建一个React组件类时，你继承自 React.Component，因此你的组件类会自动获得this.setState 方法。
this.setState 用于更新组件的state。当state更新时，React会重新渲染该组件及其子组件。

使用this.setState代码栗子：

//以下为组件 Board 的代码（一个React 组件类对象）
class Board extends React.Component {//构造函数来初始化 state(状态)//在 JavaScript classes(类)中， 在定义子类的构造函数时，你需要始终调用 super 。	          			   //所有具有 constructor 的 React 组件类都应该以 super(props) 调用启动它。constructor(props) {super(props);this.state = {  //等同于vue的data属性squares: Array(9).fill(null),};}handleClick(i) {  //等同于vue2的method属性内定义的方法const squares = this.state.squares.slice();squares[i] = 'X';//调用内置方法this.setState更新数据状态this.setState({squares: squares});}renderSquare(i) {return (//这里的Square 是另外一个组件，这里没写<Square   value={this.state.squares[i]}onClick={() => this.handleClick(i)}/>);}render() {const status = 'Next player: X';// 以下等同于vue的模版template,  XML 的标签。你的组件告诉 React 你要呈现的内容return (   <div><div className="status">{status}</div><div className="board-row">{this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}</div><div className="board-row">{this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}</div><div className="board-row">{this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}</div></div>);}
}