React官方入门程序

这是React官网上的入门项目——itc-tac-toe（井字棋）

其实我之前已经根据指南敲完了项目——但仅仅是敲而已！
很明显官方的示例是循循善诱，每做一步、然后思考、然后改进
我仅仅是敲完了，并不真正理解为什么要这么做
于是我打算重新来一遍，这次重点放在理解与思考，并在最后独立完成另外一个入门程序——todo-list
开始吧

项目主文件index.js中初始定义了三个组件：

• Square组件渲染了单个按钮button，每个button对应了九宫格的其中一个
• Board组件渲染（包含）了整个9个Square——它代表了整个棋盘
• Game渲染了含有默认值的一个Board，是自定义的顶级组件

组件间的传值——Board传值给Square

这种方式我们见过，数据会被交给Square实例的props

  renderSquare(i) {
    return <Square value={i} />;
  }

每次Board实例调用renderSquare()方法（传递一个参数）都会返回一个带有传递参数的Square组件，这些组件最终会和Borad组件一起被渲染到页面上

组件交互——点击各自后落子

这里使用了箭头函数（像后端的匿名函数lambda表达式）

其实就是Refs传值中回调的内联形式

 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>
       {this.props.value}
     </button>
   );
 }

关于保存是否被点击的状态，这里用到了state——或许是因为每次state状态改变就会触发更新，这跟落子操作非常契合：点击事件触发对state的修改->state的变更触发页面的刷新，然后看起来就是点一下页面就响应了，而不需要自己去亲自操作页面元素

如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。

然后Square就被降级了

重要概念

重要概念是状态提升，同级组件之间传值并不容易（后面有办法，但不是面向初学者的），但是通过将变量作为他们父类的成员，就可以很方便地实现这一点

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。

那么注意，这里子组件又是怎么操作父组件的state的呢？按理来说这做不到
事实上父子间向子组件传递了自己的一个成员方法，子组件通过父组件传递过来的方法操作父组件state（有点像Java的setter()函数）
此时子组件是完全被父组件控制的，即——受控组件

不可变性，这里拷贝了一份数组而不是直接修改，但说实话我并未有完全理解为什么要这么干