JSX 使用jsx的使用，用一個{}包裹起來，例如 使用（）小括弧，防止分號自動插入 如果使用箭頭函數,返回的是一個對象的話，使用（）包圍起來 組件數據傳遞 通過props 子組件向父組件傳遞數據 State constructor可以初始化state 取得state的值，通過 this.state ...
JSX
-
使用jsx的使用，用一個{}包裹起來，例如
const method = {<div> 123 </div>}
-
使用（）小括弧，防止分號自動插入
const element = ( <h1> Hello, {formatName(user)}! </h1> ); -
如果使用箭頭函數,返回的是一個對象的話，使用（）包圍起來
const element = ( <h1> Hello, {formatName(user)}! </h1> );組件數據傳遞
-
通過props
function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <Avatar user={props.author} /> <div className="UserInfo-name"> {props.author.name} </div> </div> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }這樣的話，就可以通過prop獲得到數據，這個數據是只讀的，不要修改 -
子組件向父組件傳遞數據
父： bindValue = (e) => { console.log(e)} <Son onChange = {this.bindValue}> 子： <input onChange={this.props.onChange}> 這樣的話，子--->父 傳遞便實現了State
-
constructor可以初始化state
父： bindValue = (e) => { console.log(e)} <Son onChange = {this.bindValue}> 子： <input onChange={this.props.onChange}> 這樣的話，子--->父 傳遞便實現了 -
取得state的值，通過 this.state.date
-
改變state，通過 this.setState（{}），不要忘記裡面要使用{}的方式
-
註意事項
（1）修改方式 // Wrong，頁面不會重新渲染 this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'}); （2）更新是非同步的，有時候通過setState設置數據後，列印，輸出的值是不對的綁定函數
由於this預設是不會綁定到Es6類中的，有幾種方法
-
constructor中設置
constructor (props) { super(props) this.handleClick = this.handleClick.bind(this) } -
使用箭頭函數
handClick = () => {this.handClick()} 不要忘記了後面加入（），得讓函數運行，這樣的話還一傳遞參數，如下： handClick = (e) => {this.handClick(e)}條件渲染
-
控制顯示和隱藏的時候可以使用 &&
const show = 1 show === 1 && <div>hello React </div> 這樣就可以控制是否顯示，可以通過一個事件控制show的值
-
三元表達式
show ？ （<div key='1'> show</div>）: (<div key='2'> hidden </div>) 最後加key，因為頁面在渲染的時候會利用重覆的元素，不是每一個都要重覆渲染，加入key 就會認為是不同的元素
