react學習筆記

 react 學習筆記 

    好在哪兒：
     1.組件化——分工、合做
     2.虛擬DOM——性能高
     3.跨平臺——移動端

    缺點：
     1.學習曲線特別陡
     2.設計思想有點特別

    React全家桶(技術棧)
     1.React主體
     2.WebPack：grunt、gulp自動化構建工具
     3.Flex：佈局
     4.React-Route：路由
     5.Redux：View層
     6.Mocha：測試
     7.Istanbul：覆蓋率

      ----------------------------------------------------

    JSX：
     1.加強型JS語法——HTML代碼直接放JS裏
     2.babel

    注意：
     1.有且僅有一個父元素
     2.模板字符串
       var oDiv=<div>{aaa}</div>;

    最強：
     1.組件
     2.狀態

     ----------------------------------------------------

     IndexPage

     <Header/>
        <IndexContent/>
     <Footer/>

     ----------------------------------------------------

    1.定義組件——組件==class
       class 名字 extends React.Component{
          render(){
             return <span>111</span>;
          }
     }

    

     2.使用組件
       就跟標籤同樣用
       ReactDOM.render(
        <span>111</span>,
        oDiv
      );

      ReactDOM.render(　　
      <Comp/>,
        oDiv
     );

 ----------------------------------------------------

      屬性——定死
      狀態——變的

      ----------------------------------------------------

      1.狀態是活的
      constructor裏面——this.state={};
      方法裏面——this.setState({});

      2.事件大小寫不能亂
       onChange
       onClick
        ...

      3.綁定事件
       onChange={fn} fn是方法，不是函數
       onChange={this.fn} 不對，須要bind
       onChange={this.fn.bind(this)} OK

      4.用constructor的時候，必須用super

       Angular霸道——原生定時器、jQuery
       react溫柔——能夠跟原生、jQuery配合起來

      ----------------------------------------------------

      組件——生存週期

      componentWillMount() 建立以前
      componentDidMount() 建立以後

      componentWillUpdate() 更新以前
      componentDidUpdate() 更新以後

      componentWillUnmount() 卸載以前
      沒有componentDidUnmount

      componentWillReceiveProps() 組件參數更新

       

     ----------------------------------------------------

      重用組件

    ----------------------------------------------------

      錯的：
      <ul>
        <Item/>
        <Item/>
        <Item/>
        <Item/>
      </ul>

     對的：
         arr.push(<Item/>);
         arr.push(<Item/>);
         arr.push(<Item/>);
         arr.push(<Item/>);
         ...

      <ul>
         {arr}
      </ul>