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

简述

1. this.setState 方法是React组件类（React.Component 的子类）的一个内置方法。当你在创建一个React组件类时，你继承自 React.Component，因此你的组件类会自动获得this.setState 方法。
2. 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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54