关于React学习中的自问

1. 组件名为什么要大写？

如果组件名小写，在ReactDOM.render()里面将组件名大写，依旧会报错。其实就一直有一个疑问，
就是为什么组件名就一定要大写呢？

我们在render中写的语法是JSX，而JSX中，小写的标签名字会被认为是HTML标签，而大写的标签
则不会认为HTML标签。

实践

我们用JSX写出来的组件，到头来会被Babel转为React.createElement()方法，所以JSX就是这个方法的一个语法糖。

我们来看看大小写组件使用babel转义过后是什么样子：

class foot extends React.Component{
 render(){
   return hello
 } 
}

class Foot extends React.Component{
 render(){
   return hello
 } 
}

var app1 = <div>谁跟我一样</div
var app = <foot game='test'></foot>
var app = <Foot game='test'></Foot>

babel转义部分代码

点击实践飞机票自己也可以查看转义后的代码噢！
发现大小写不同转义出来的结构其实也是不一样的，但是小写的组件被解析出来的代码和普通的HTML的标签是一致的，
所以会以HTML标签的方式渲染出来。但是小写的组件还是存在在整个文件中的，就是一种我造了你，你居然不听我命令的感觉。
而大写组件解析出来的代码，React.createElement()的第一个参数则是上面申明出来的一个变量，所以渲染的时候会找到对应组件进而渲染。

说会JSX，查看了部分网上的资料，很多人将其解析为JSX是JavaScript和XML的结合，可是官网明显给出的定义：

It is called JSX, and it is a syntax extension to JavaScript.
我们对JavaScript语法上做了一些拓展，将其命为JSX

归根结底还是 JavaScript 。

2. React 中绑定 javascript 的 this 关键字，三种绑定this作用域的方法，那个好？

在constructor里面绑定好所有方法的this值（官方推荐）。

class Timer extends React.Component{
   constructor(){
      super()
      this.handleClick = this.handleClick.bind(this)
   }
   handleClick = function(){
     //do sth   
   }
   render(){
      return (
       <div onClick="this.handleClick()">点我</div>
      ) 
   }
}

在绑定的事件的地方绑定this值。

class Timer extends React.Component{
   ....
   handleClick = function(){
     //do sth   
   }
   render(){
      return (
       <div onClick="this.handleClick.bind(this)">点我</div>
      ) 
   }
}

将绑定的函数改为箭头函数。

class Timer extends React.Component{
   ....
   handleClick = ()=>{
     //do sth   
   }
   render(){
      return (
       <div onClick="this.handleClick">点我</div>
      ) 
   }
}

绑定方法不止上述的三种，有些可以根据上述的方法组合出来的就不加以讨论。其实性能上的开销而言，第一种和第三种的方法是差不多的，都是在组件生成是完成了this值的绑定（箭头函数中this的是父级的this），但是为什么不建议在render函数里绑定this呢？只是防止，再次渲染组件的时候生成了新的函数，当然小的项目中并没有什么影响，可是想想大型项目中，不断的re-render会让页面变得卡顿，严重的直接堆溢出。所以在这里蛮推荐官方的使用方法，可狗血的是每一个人都懒的写多余的代码，那就勉为其难的推荐第三种方法。