- 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元素的首字母是小寫狀態(tài)。不管是組件元素還是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. 另外一種是帶有業(yè)務和數據的ui組件的組合轿亮，這類注重的是數據和界面的交互。
在react中胸墙，通過自定義元素的方式實現了組件化我注，然而react的本質是關注元素的構成，react組件即為組件元素迟隅。組件元素被描述為純粹的JSON對象但骨，這樣也就意味著可以使用方法或者類來進行構建這個組件元素。
react組件主要由三個部分組成智袭，屬性嗽冒，狀態(tài)，生命周期补履。react組件可以接受屬性參數添坊，也可以有自身的狀態(tài)，對比自身的狀態(tài)和收到的屬性參數箫锤，然后觸發(fā)生命周期方法贬蛙，最后渲染。
總結一下：
1. react渲染的過程中包括了模板的概念谚攒，即所謂的JSX.
2. react組件的實現均是在方法和類中阳准。
3. react遵循es6中模塊的概念。
可見react還是是JavaScript的基礎上進行大量封裝馏臭，把HTML結構徹底引入到JavaScript中野蝇。
- react組件構造方法
react的組件基本上可以分為以下三種方式組成，由組件的構建方式括儒，組件內屬性狀態(tài)和生命周期方法組成绕沈。官方提供了三種構建組件的方式- React.createClass
- ES6 class
- 無狀態(tài)函數
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. 無狀態(tài)函數
function Button({color='blue', text='confirm'}) {
return (
<button disabled className={`btn btn-${color}`}>
<em>{text}</em>
</button>
)
}
無狀態(tài)函數只傳入props和context兩個參數，也就是說它不存在state帮寻，也沒有生命周期方法乍狐，組件本身即前兩種React方法中的render方法。
無狀態(tài)方法不像之前兩種方法會在調用的時候創(chuàng)造實例固逗，它在創(chuàng)建時始終保持了一個實例浅蚪。
