这是我参与「第五届青训营」伴学笔记创作活动的第 3 天 React.js 示例游戏的完善
在完成基本的鼠标操作后 我们进行了状态提升
每个 Square 组件都维护了游戏的状态。我们可以把所有 9 个 Square 的值放在一个地方，这样我们就可以判断出胜者了。
目前的几个问题:
-
组件的state？其可行性为什么不行？
答：我们希望 Square 组件可以“记住”它被点击过，然后用 “X” 来填充对应的方格。我们用 state 来实现所谓“记忆”的功能。
可以通过在 React 组件的构造函数中设置
this.state来初始化 state。this.state应该被视为一个组件的私有属性。我们在this.state中存储当前每个方格（Square）的值，并且在每次方格被点击的时候改变这个值。 -
state提升是什么？
React官方文档如是说：
当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。
关于具体的概念 待我查询
-
构造函数在react中的作用？
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
squares: Array(9).fill(null),
};
}
renderSquare(i) {
return <Square value={i} />;
}
这段代码可见 constructor 作为声明数组的形式来使用
问题：this.state的功用看来是一个对象 JS方法：squares:Array9.fill（null)
结论：react可使用js方法用法看来更加灵活
renderSquare(i) {
return <Square value={i} />;
}
我们依次使把 0 到 8 的值通过 prop 从 Board向下传递，从而让它们显示出来。
我们根据Square自身内部的state ，使用了 “X” 来代替之前的数字。因此，Square 忽略了当前从 Board 传递给它的那个 value prop。
我们再一次使用 prop 的传递机制。我们通过修改 Board 来指示每一个 Square 的当前值（'X', 'O', 或者 null）。
我们在 Board 的构造函数中已经定义好了 squares 数组，这样，我们就可以通过修改 Board 的 renderSquare 方法来读取这些值了。
renderSquare(i) {
return <Square value={this.state.squares[i]} />; }
通过这样，每个 Square 就都能接收到一个 value prop 了，这个 prop 的值可以是 'X'、 'O'、 或 null（null 代表空方格）。
Class Square 内部的state
<button className="square" onClick={function() { alert('click'); }}>
