JSX

所谓JSX，是JavaScript的语法扩展（eXtension），让我们在JavaScript像HTML一样的代码。
JSX使用的“元素”不局限于HTML中的元素，可以是任意一个react组件。React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写，如果在JSX中我们不用ClickCounter而是用clickCounter，那就得不到想要的结果。其次，在JSX中可以通过onClick给一个元素添加一个事件处理函数

render() {
  return (
    <div>
        <button onClick={this.onClickButton}>Click</button>
    </div>
  )
}

React工作方式的优点

React利用函数式编程的思维来解决用户界面渲染的问题，最大优势是开发者的效率大大提高，开发出来的代码可维护性和可阅读性也大大增强。

React组件

React数据分为两种：
prop和state，无论两者的改变都可能引发组件的重新渲染，什么时候分别用到两者，其原则是prop是组件的对外接口，state是组件的内部状态，对外用prop，内部用state。

prop

1.给prop赋值
<SampleButton id="sample" borderWidth={2} onClick={onButtonClick} style={{color:"red"}} />
React组件的prop所能支持的类型则丰富的多，除字符串，可以是任何一种JavaScript语言支持的数据类型。
以上组件实例中吗，borderWidth是数字类型，onClick是函数类型，style的值是一个包含color字段的对象，当prop不是字符串类型时，在JSX中必须用花括号{}把prop值包住，所以style的值有两层花括号，外层花括号代表JSX语法，内层花括号代表这是一个对象常量。
当外部世界传一些数据给React组件，最直接是通过prop，同样，React组件要反馈数据给外部世界，也可以用prop(prop类型不限于纯数据，也可以是函数)函数的prop等于让父组件给了子组件一个回调函数，子组件在恰当的实际调用函数类型的prop，可以带上必要的参数，这样可以反过来把信息传递给外部世界。
2.读prop值
如果一个组件需定义构造函数，一定记得在构造函数第一行通过super调用父类。如果在构造函数中没有调用super(props)，那么组件实例被构造后，类实例的所有成员函数就无法通过this.props访问到父组件传递过来的props的值。
在构造函数可以通过参数props获得传入prop值，在其它函数中则可以通过this.props访问传入prop的值。
3.propTypes检查
在ES6方法定义的组件类中，可以通过增加类的propTypes属性来定义prop规格，这不是声明，而且是一种限制，在运行时和静态代码检查时，都可以根据propTypes判断外部世界是否正确使用了组件的属性。
propTypes检查只是一个辅助开发的功能（针对开发），并不会改变组件的行为，所以在产品发布时用自动的方式将propTypes去掉，这样最终部署到产品环境的代码就会更有。

state

1.初始化state
在构造函数中结尾初始化state

constructor(props) {
  ...
  this.state = {
    count: props.initValue || 0
  }
}

组件的state必须是一个JavaScript对象，不能是string或者number这样简单的数据类型，即使我们需要存储的只是一个数字类型的数据，也只能把它存作state某个字段对应的值。
2.读取和更新state
this.state可以读取到组件的当前state。需注意当我们改变组件state必须使用setState函数，而不能直接去修改this.state。

prop和state对比

• prop用于定义外部接口，state用于记录内部状态
• prop的赋值在外部世界使用组件时，state的赋值在组件内部
• 组件不应该改变prop 的值，而state存在的目的就是让组件来改变的