react特點(diǎn)

1. 用過(guò)ReactDOM.render(html,id)的方式渲染頁(yè)面；
2. 其中html是html字符串，多個(gè)html節(jié)點(diǎn)可以用()包含，里面可以使用js變量，js變量需要用{}包起來(lái)；id是掛載元素的實(shí)例，可以通過(guò)document.getElementById獲?。?/li>
3. 函數(shù)封裝(組件)：
   function Clock(props) {
   return (<div>{props.date}</div>)
   }
   <Clock date={new Date()}>
4. 除了函數(shù)外我們還可以創(chuàng)建一個(gè)React.Component 的 ES6 類，該類封裝了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替換 props

JSX語(yǔ)法

1. const element = <h1 className="class-name">Hello, world!</h1>;
2. 推薦使用內(nèi)聯(lián)樣式:
   var myStyle = {
   fontSize: 100,
   color: '#FF0000'
   };
   ReactDOM.render(
   <h1 style = {myStyle}>菜鳥(niǎo)教程</h1>,
   document.getElementById('example')
   );
3. JSX 允許在模板中插入數(shù)組，數(shù)組會(huì)自動(dòng)展開(kāi)所有成員：
   var arr = [
   <h1>菜鳥(niǎo)教程</h1>,
   <h2>學(xué)的不僅是技術(shù)，更是夢(mèng)想！</h2>,
   ];
   ReactDOM.render(
   <div>{arr}</div>,
   document.getElementById('example')
   );

組件：

1. 可以使用命名函數(shù)function App(props)的方式構(gòu)建組件，組件的變量用props.XXX顯示；
2. 也可使用class App extends React.Component方式定義組件如下：
   組件的變量用this.props.XXX顯示，組件內(nèi)自己實(shí)現(xiàn)render函數(shù)，return的內(nèi)容即是組件內(nèi)容。
   class App extends React.Component {
   render(){
   return (
   <div>
   <h1 style={{textAlign: 'center'}}>{this.props.title}</h1>
   <Desc content={"好好學(xué)習(xí)，天天向上"}/>
   </div>
   );
   }
   }

狀態(tài)State

1. 在constructor里定義state狀態(tài), 如this.state = {date, new Date()};
2. 更新?tīng)顟B(tài)使用setState，如this.setState('date', new Date());
3. 通過(guò)調(diào)用 this.setState() ，React 知道狀態(tài)已經(jīng)改變，并再次調(diào)用 render() 方法來(lái)確定屏幕上應(yīng)當(dāng)顯示什么

Props

1. state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來(lái)改變。這就是為什么有些容器組件需要定義 state 來(lái)更新和修改數(shù)據(jù)。 而子組件只能通過(guò) props 來(lái)傳遞數(shù)據(jù)；
2. 可以通過(guò)App.defaultProps的方式設(shè)置默認(rèn)props；
3. 我們可以在父組件中設(shè)置 state， 并通過(guò)在子組件上使用 props 將其傳遞到子組件上。在 render 函數(shù)中, 我們?cè)O(shè)置 name 和 site 來(lái)獲取父組件傳遞過(guò)來(lái)的數(shù)據(jù)。

生命周期

1. constructor：完成了React數(shù)據(jù)的初始化
2. componentWillMount：在渲染前調(diào)用,在客戶端也在服務(wù)端。
3. componentDidMount: 在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對(duì)應(yīng)的DOM結(jié)構(gòu)，可以通過(guò)this.getDOMNode()來(lái)進(jìn)行訪問(wèn)。 如果你想和其他JavaScript框架一起使用，可以在這個(gè)方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請(qǐng)求等操作(防止異步操作阻塞UI)。
4. componentWillReceiveProps：在組件接收到一個(gè)新的 prop (更新后)時(shí)被調(diào)用。這個(gè)方法在初始化render時(shí)不會(huì)被調(diào)用。
5. shouldComponentUpdate：返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)被調(diào)用。在初始化時(shí)或者使用forceUpdate時(shí)不被調(diào)用。
   可以在你確認(rèn)不需要更新組件時(shí)使用。
6. componentWillUpdate：在組件接收到新的props或者state但還沒(méi)有render時(shí)被調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。
7. componentDidUpdate：在組件完成更新后立即調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。
8. componentWillUnmount：在組件從 DOM 中移除之前立刻被調(diào)用。

事件處理

1. <button onClick={activateLasers}>激活按鈕</button>
2. onClick={this.changeAge.bind(this)} 和 onClick={()=>this.changeAge()} 可以互換；
3. 使用toggle = () => {}定義事件，則可以直接使用{this.toggle}方式觸發(fā)事件；
4. 推薦(event)=> this.toggle(event, 'a')方式調(diào)用函數(shù)；