react 學習記錄（一）

http://www.ruanyifeng.com/blog/2015/03/react.html

寫在前面

前期瞭解到新的項目組將會使用react進行開發，因爲以前只聞其名（懶——捂臉）沒有進行學習，利用以前這段時間的晚上，跟個阮一峯老師的教程給走一遍的說

仍是同樣，只記錄本身以爲有可能會有誤解的東東

demo1

ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );

我本身理解就是

ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example'));

ReactDOM.render(html結構,jsdom對象)

demo2

老師一句精闢的話

JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析

demo3

<script type="text/babel">
      var arr = [
        <h1 key="1">Hello world!</h1>,
        <h2 key="2">React is awesome</h2>,
      ];
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>{arr}{names}</div>,
        document.getElementById('example')
      );
    </script>

正常的

<script type="text/babel">
      var arr = [
        <h1 key="1">Hello world!</h1>,
        <h2 key="2">React is awesome</h2>,
      ];
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>{arr}</div><div>{names}</div>,
        document.getElementById('example')
      );
    </script>

報錯

目前本身的理解是在jsx中ReactDOM.render(）的html結構只能包含一個顯示的標籤對進行包裝。。

內部包含js的{ }（做用域？）相似demo2？

demo4

我能說組件這小段有點繞嗎。/(ㄒoㄒ)/~~

理理

一、React.createClass（）生成類（姑且叫作組件類）

二、React.createClass（{ }）參數是一個對象，（可否當成js理解————大霧）

三、這個做爲參數的的對象，必須有 必須有 必須有本身的 render 方法，用於輸出組件。

四、組件類的第一個字母必須大寫，不然會報錯，好比HelloMessage不能寫成helloMessage(~源碼這方面有給根據？只能首字母大寫的讓作標籤(*^_^*)？)

五、組件類只能包含一個頂層標籤，不然也會報錯。

demo給的例子是

var HelloMessage = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});

運行報錯也是

我本身猜想應該是運行時候先把組件換成html而後再執行ReactDOM.render();

六、組件的屬性能夠在組件類的 this.props 對象上獲取，好比 name 屬性就能夠經過 this.props.name 讀取

這裏老師給補充了一點

class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字

這裏死記。。。

demo5

一、順便百度了下全部關於children的

react this.props.children 屬性。它表示組件的全部子節點。

jq .children(selector)  children() 方法返回返回被選元素的全部直接子元素。

二、demo中

ReactDOM.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById('example')
      );

ReactDOM.render（）第一個參數也是要求只能有一個頂層標籤就能夠過了！！

三、this.props.children 的值有三種可能：

若是當前組件沒有子節點，它就是 undefined ;

若是有一個子節點，數據類型是 object ；

若是有多個子節點，數據類型就是 array

四、從外面開始理解

工具方法 React.Children 

 React.Children.map 來遍歷子節點

不用擔憂 this.props.children 的數據類型是 undefined 仍是 object。

var NotesList = React.createClass({
        render: function() {
          return (
            <ol>
              {
                React.Children.map(this.props.children, function (child) {
                  return <li>{child}</li>;
                })
              }
            </ol>
          );
        }
      });

React.Children.map(子節點，處理函數（對象變量？））

 

未完待續