React井字旗游戏

教程：

井字旗游戏教程链接

教程中对于Array.prototype.slice的阐述有问题(链接),根据mdn中对slice的定义其返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，然而教程中所述slice是深拷贝，经过测试，slice确实是浅拷贝(Chrome 55浏览器)。深浅拷贝区别请见链接

按照上述教程便可完成一个简单的井字旗游戏，以下是我学习开发过程中的问题记录，目的是分享和记录自己所遇见的问题。

问题记录：

Question 1:

在使用ES6的class创建模版时，主要class是类且变量名第一个字母需要大写，今日在写代码过程中由于没有首字母大写而导致dom无法渲染。

上面截图的代码无法显示shoppingList组件

当将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入门教程时碰见的问题，主要是记录与总结。若有偏差或错误，欢迎指出，谢谢浏览。