React學習隨筆－讀阮一峰教程有感

　　跟隨阮一峰的React入門學習，把里面的代碼down下來，然后一個個demo去嘗試，修改

demo1－React.render

　　1 ReactDOM.render() 方法 接受兩個入門參數，第一個是需要插入的節點，第二個插入的父節點

demo2 -JSX

　　1 JSX的基本語法 遇到｛以js語法解析，<以html語法解析

　　2 html的數組會被遍歷生成html 如下，會被正確執行，生成兩個div　　　　　　

ReactDOM.render(
        <div>
        {
          // names.map(function(name){
          //   return <div>Hi, {name}</div>
          // })
          [<div>wiki</div>,<div>jack</div>]
        }
        </div>,
        document.getElementById('example')
      );

　　3 將里面的數組改成<div>wiki</div><div>jack</div>，會直接報錯，也不支持return這樣的語句

　　4 即然數組可以，那試試對象－將里面的數據改成{div: 'wiki'} Invariant Violation: Objects are not valid as a React child (found: object with keys {div}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.  翻譯一下吧：{div}這樣的object不能作為React的child，必須使用數組或者React構造方法生成的對象。

 demo4 - 組件，上面的使用React的構建對象的方法，

　　1 React.createClass 提供了上面構造方法，可以理解成new 一個ReactChild這樣的類，需要實現render這個接口，沒有實現的話 Uncaught Error: Invariant Violation: createClass(...): Class specification must implement a `render` method.

　　2 通過<ClassName> 這樣的html標簽式的調用，同時定義標簽上面的屬性，會自動帶到ClassName.props屬性里面，再看看屬性里面能不能插入對象屬性

　　　　

var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.arr[0]} {this.props.ob.key}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="John" arr={['a1', 'a2']} ob={{key: 'value'}} />,
        document.getElementById('example')
      );

經過上面代碼驗證，props屬性里面是可以保存對象屬性的

　　　3 html標簽里面class要寫成className， for要寫成htmlFor，這個試了下，代碼不會生效，但是控制台會有error的提醒

　　　4 上面列出來的代碼會變成4個span標簽，現在看是會根據html的標簽里的空格進行分隔，{}里面的空格不會被分割－－有待后續了解原因

 

 

demo5－pros.children－－閉合標簽內部的元素

　　1 一般pros屬性和自定義標簽的屬性一一對應，children屬性，遍歷this.pros, 如果是html標簽  Each child in an array or iterator should have a unique "key" prop. Check the render method of `NotesList`. See https://fb.me/react-warning-keys for more information,大概是缺少data-reactid這個唯一的屬性，如果是array數組，依舊有上面的error提示，好吧，改成React.Children.map(this.props.children,function(){.. })方法，如果是{key:'world'}，無論上面哪種遍歷都會報錯，對象不能ReactElment

 

 

demo5 -propTypes --驗證pros對象內屬性的類型和合法性

　　1 用控制台查看一下React.proTypes屬性，圖列在這里了，有什么需要可以去查API或者直接到控制台看方法

　　2 有React自帶的，那自然有自定義的驗證方法，這個還是上官網看到的，就不詳細說了

 

demo7 -- 獲取真實dom－this.refs屬性　　　　

　　1 React的虛擬dom節點，可以通過給插入進頁面的dom元素加入ref屬性，返回的是dom對象，而不是像jquery那樣封裝過的dom對象

　　2 dom的事件屬性綁定，直接到屬性里面加入onClick方法，可查看官方API－http://facebook.github.io/react/docs/events.html#supported-events，支持的事件比較多，竟然還有copy這樣的，猜測大概是通過綁定key-up這樣綁定的

 

 

demo8 -- 與用戶互動  this.state屬性， pros更側重於靜態不變化的數據，state更多用來保存state屬性

　　1 事例，修改了state屬性之后，用state生成的text字符串也發生了改變，類似angular的雙向綁定處理。－－查看實現原理

　　2 通過getInitialState設置初始狀態，建議將需要的state在init方法里面，把組件看成的不同表現形式看成不同的狀態形式，假設沒有getInitialState方法，則會直接報Uncaught TypeError: Cannot read property 'liked' of null ,看來是React生成的對象里面默認沒有stat屬性

 

 

demo9 -- 與綁定表單事件關聯，原來React不能像Angular那樣雙向綁定

　　1