深入React技术栈：初入React世界（2）

JSX基本语法
JSX的官方定义是类XML语法的ECMAScript的扩展。
XML基本语法
使用类XML语法好处之一是标签可以互相嵌套，而且我们可以像HTML一样清晰的看到DOM树的层状结构和属性。

const List = () => {
<div>
      <Title>this is title</Title>
      <ul>
        <li>item</li>
      </ul>
</div>
  }

可以看到写上面组件的过程就想写HTML一样，只不过被包裹在JavaScript的方法中。但是需要注意：
1. 定义标签的时候只能被一个标签包裹。即一个组件最外层必须只能有一个标签进行包裹着。
2. 标签一定要闭合。react的语法比较严谨，所有的标签都需要闭合，不管是单标签还是双标签。

元素类型
之前我们说过两种不同的元素类型，一种是组件元素，一种是DOM元素。
组件元素的首字母一般情况下是大写，DOM元素的首字母是小写状态。不管是组件元素还是DOM元素，他们都有自己的属性。但是值得注意的是class和for，因为在JavaScript中这两个都是关键词所以有其他的进行替代:
class -- className
for -- htmlFor
在组件元素中的属性完全可以根据自己的需要进行自定义属性，也可以理解这些自定义属性是这些组件的一些参数或者接口。

const Header = (title, children) => {
 <h2 title={title}>{children}</h2>
}
//我们给Header加一个title属性，那么调用的时候：
<Header title='hello'>hello</Header>

React组件
关于组件这个概念我们可以分两种思考：
1. 一种是狭义上的ui组件，仅仅围绕这交互动作上的抽象，例如tab，Dropzone等，仅仅通过操作DOM和样式来控制。
2. 另外一种是带有业务和数据的ui组件的组合，这类注重的是数据和界面的交互。

在react中，通过自定义元素的方式实现了组件化，然而react的本质是关注元素的构成，react组件即为组件元素。组件元素被描述为纯粹的JSON对象，这样也就意味着可以使用方法或者类来进行构建这个组件元素。
react组件主要由三个部分组成，属性，状态，生命周期。react组件可以接受属性参数，也可以有自身的状态，对比自身的状态和收到的属性参数，然后触发生命周期方法，最后渲染。
总结一下：
1. react渲染的过程中包括了模板的概念，即所谓的JSX.
2. react组件的实现均是在方法和类中。
3. react遵循es6中模块的概念。
可见react还是是JavaScript的基础上进行大量封装，把HTML结构彻底引入到JavaScript中。

react组件构造方法
react的组件基本上可以分为以下三种方式组成，由组件的构建方式，组件内属性状态和生命周期方法组成。官方提供了三种构建组件的方式
1. React.createClass
2. ES6 class
3. 无状态函数

1.React.createClass
const Button = React.createClass({
   getDefaultProps(){
       return {
         color: 'blue',
         text: 'hello world'
       }
    },
   render(){
      const {color, text} = this.props
      return (
          <button className={`btn btn-${color}`}>
              <em>{text}</em>
          <button>
      )
   }
})

2. ES6 classes
import React, {Component} from 'react'

class Button extends Component{
    constructor(props) {
        super(props)
    }
    
    static defaultProps = {
        color: 'blue',
        text: 'confirm'
    }
    
    render() {
        return (
            <button className="`btn btn-${color}`">
                <em>{text}</em>
            </button>
        )
    }
}

3. 无状态函数
function Button({color='blue', text='confirm'}) {
    return (
        <button disabled className={`btn btn-${color}`}>
            <em>{text}</em>
        </button>
    )
}
无状态函数只传入props和context两个参数，也就是说它不存在state，也没有生命周期方法，组件本身即前两种React方法中的render方法。

无状态方法不像之前两种方法会在调用的时候创造实例，它在创建时始终保持了一个实例。

深入React技术栈：初入React世界（2）

推荐阅读更多精彩内容