Day 2
我们再一次使用 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'); }}>
新的问题出现了：
react代码中存在着形如HTML代码的<Square ..........>
熟悉又陌生 其是单标签 并且HTML中并没有这些标签的作用
待查询
这是分割————————
接下来，我们要修改一下 Square 的点击事件监听函数。
Board 组件当前维护了那些已经被填充了的方格。我们需要想办法让 Square 去更新 Board 的 state。
由于 state 对于每个组件来说是私有的，因此我们不能直接通过 Square 来更新 Board 的 state。（参见类与对象）
相反 ，从board组件向square组件传递一个函数，当 Square 被点击的时候，这个函数就会被调用。
我们将Board 组件的 renderSquare 方法改写为如下效果：
renderSquare(i) {
return (
<Square
value={this.state.squares[i]}
onClick={() => this.handleClick(i)} />
);
}
/*
提高可读性的方法
把返回的 React 元素拆分成了多行，同时在最外层加了小括号，这样 JavaScript 解析的时候就不会在 return 的后面自动插入一个分号从而破坏代码结构了。
*/
我们从 Board 组件向 Square 组件中传递两个 props 参数：value 和 onClick。
onClick prop 是一个 Square 组件点击事件监听函数。
接下来，我们需要修改 Square 的代码至：
- 将 Square 组件的
render方法中的this.state.value替换为this.props.value。 - 将 Square 组件的
render方法中的this.setState()替换为this.props.onClick()。 - 删掉 Square 组件中的构造函数
constructor，因为该组件不需要再保存游戏的 state。
class Square extends React.Component { render() { return (
<button
className="square"
onClick={() => this.props.onClick()} >
{this.props.value} </button>
);
}
}
问题 : render方法的作用? 每一个react类 都带有render方法 我不知道其作用是什么
