React--井字棋实战（5）

受控组件

目前的 Square 组件称做“受控组件”。在这种情况下，Board 组件完全控制了 Square 组件。

改变数据的方式

第一种方式是直接修改变量的值。

第二种方式是使用新的一份数据替换旧数据。

撤销和恢复功能需求

不直接在数据上修改可以让我们追溯并复用游戏的历史记录，这就是方法。

替换Square类

function Square(props) {
    return <button className = 'square'
    onClick = { props.onClick } > { props.value } < /button>
}

修改juziClick()方法

juziClick(i) {
        const juzi = this.state.juzi.slice();
        juzi[i] = this.state.juziIsNext ? '大橘子' : '小橘子';
        this.setState({
            juzi,
            juziIsNext: !this.state.juziIsNext
        })
    }

运行截图

修改Board组件中render（)方法的status

const status = '当前玩家:' + (this.state.juziIsNext ? '大橘子' : '小橘子');

运行测试截图

请完成以上实操，加油