教程：
教程中对于Array.prototype.slice的阐述有问题(链接),根据mdn中对slice的定义其返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，然而教程中所述slice是深拷贝，经过测试，slice确实是浅拷贝(Chrome 55浏览器)。深浅拷贝区别请见链接
按照上述教程便可完成一个简单的井字旗游戏，以下是我学习开发过程中的问题记录，目的是分享和记录自己所遇见的问题。
问题记录：
Question 1:
在使用ES6的class创建模版时，主要class是类且变量名第一个字母需要大写，今日在写代码过程中由于没有首字母大写而导致dom无法渲染。
当将shoppingList组件变量名改为ShoppingList之后则可正常显示。
Question 2
在使用组件内部render函数返回时，要注意render方法返回的dom只能包含一个根元素。
render(){
return(
<div>
{this.renderSquare(1)}
{this.renderSquare(2)}
{this.renderSquare(3)}
</div>
<div>
{this.renderSquare(4)}
{this.renderSquare(5)}
{this.renderSquare(6)}
</div>
<div>
{this.renderSquare(7)}
{this.renderSquare(8)}
{this.renderSquare(9)}
</div>
)
}
上述片段由于未被一个根元素包含，因此会报错：
Question 3
在使用React时如果需要进行组件之间的通信，那么需要将子组件的状态提升到父组件中，然后父组件通过props将状态传递给子组件再更新。
Question 4
在组件上的onClick属性并不会解析为click事件，只会当作传递给子组件的props属性。
父组件:
<Square onClick = {()=>{this.handler()}} />
上述代码中的onClick并不会绑定在Square组件上，而是当作props传递。
子组件：
render(){return(<button onClick = {()=>{this.props.onClick()}}></button>)}
如此当子组件被点击后触发click事件调用props上的onClick属性对应的函数，从而调用父组件上绑定的this.handler()方法。
Question 5
React为只存在render()方法的组件设计了一种更简单的定义方法-函数定义组件：
原始组件
class Square extends React.Component{
render(){
return(
<button className="square" onClick = {()=>{this.props.onClick()}}>
{this.props.value}
</button>
);
}
}
上述Square组件只存在一个render方法，因此我们可以使用函数定义组件并返回JSX就可以啦
重构的Square组件
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
总结：
本文主要记录前端小白初学React入门教程时碰见的问题，主要是记录与总结。若有偏差或错误，欢迎指出，谢谢浏览。
