React學習筆記。

　　有段時間沒寫博客了，最近這段時間有點說不出的苦，雖說年輕的時候該多出去經歷些事，但每次找工做東跑西跑，坐公交坐地鐵浪費了我太多時間，我感受到這是一種浪費，對生命的浪費。因此很想盡快找到一份工做，去努力去奮鬥。這兩天週末，沒有什麼招聘，在租房裏學習了React框架。由於不少公司技術要求都有這個框架，想學習學習提升一些新技術的把握，之後若是須要能夠深刻學習一下。雖然本身寫博客水平不好，但仍是得堅持寫下去。

　　學習過程主要看了阮一峯的React入門，在git上下了他的教程，而後把每一個教程都本身跟着敲了一遍，最後又根據記憶本身動手從頭根據本身的理解來敲，這樣效率很高，不得不說這樣的學習方法很實用，這也是這幾年自學領悟的方法。下一個學習目標，Zepto框架。嗯。移動端對於我來講是個問題，如今有必要攻破它。

       1.前言

　　若是大面積的操做 DOM，性能會是一個很大的問題，因此 React 實現了一個 虛擬 DOM ，組件 DOM 結構就是映射到這個虛擬 DOM 上，React 在這個虛擬 DOM 上實現了一個 diff 算法，當要更新組件的時候，會經過 diff 尋找到要變動的 DOM 節點，再把這個修改更新到瀏覽器實際的 DOM 節點上，因此實際上不是真的渲染整個 DOM 樹。這個虛擬 DOM 是一個純粹的 JS 數據結構，因此性能會比原生 DOM 快不少。

　　Virtual DOM 是一個模擬 DOM 樹的 JavaScript 對象。 React 使用 Virtual DOM 來渲染 UI，當組件狀態 state 有更改的時候，React 會自動調用組件的 render 方法從新渲染整個組件的 UI。React 主要的目標是提供一套不一樣的, 高效的方案來更新 DOM.不是經過直接把 DOM 變成可變的數據, 而是經過構建 「Virtual DOM」, 虛擬的 DOM, 隨後 React 處理真實的 DOM 上的更新來進行模擬相應的更新。

       2.依賴包

　　要想使用React須要引入下面這3個js文件，其中react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，browser.js 的做用是將 JSX 語法轉爲 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。

    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>

　　能夠說React和JSX沒有一定的聯繫，沒有JSX的React也能夠單獨運行，但你仍是會發現，這二者就是雙胞胎嘛。通常都會一塊兒使用。

　　下面咱們來看一下JSX在React中的使用。

　　3.JSX　　 

　　　先來看一個例子。　　

　　　 var arr = ["yh1","yh2","yh3"];
      ReactDOM.render(
      <div>
      {                               //使用JS規則解析
        arr.map(function(item){
          return <p>fuck,{item}</p>
        })
      }
      </div>,
      document.body
      )

　　HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是JSX語法。解析過程爲遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。

　　4.組件

　　React中感受最厲害的地方就是組件了，具體細節你們能夠看阮一峯老師的博客，這裏我記錄本身須要記憶的部分。

　　React 提供一個工具方法 React.Children 來處理 this.props.children 。咱們能夠用 React.Children.map 來遍歷子節點，而不用擔憂 this.props.children 的數據類型是 undefined仍是 object。

　　其中組件類this.props能夠獲取標籤中屬性。

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

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

　　組件的屬性能夠接受任意值，字符串、對象、函數等等均可以。組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求.

　　

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
var data = 123;

ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

　　上面例子中propTypes規定組件中必須有一個title屬性，並且這個屬性必須是string類型，當傳入數值時就會報錯，上訴代碼會報錯。

   getDefaultProps 方法能夠用來設置組件屬性的默認值。

　　

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

　　組件中的state情況我掌握得比較多，是一個很是有用的東西，但願你們熟練使用，由於我比較熟練，這裏就不記錄了。

　　下面是獲取表單內容時使用event.target.value。這裏沒有其餘方法，只能靠記憶。

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

　　下面是React中比較重要的一個東西，組件的生命週期。

　　5.組件的生命週期

　　組件的生命週期分紅三個狀態：

• Mounting：已插入真實 DOM
• Updating：正在被從新渲染
• Unmounting：已移出真實 DOM

　　React 爲每一個狀態都提供了兩種處理函數，will 函數在進入狀態以前調用，did 函數在進入狀態以後調用，三種狀態共計五種處理函數。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

　　此外，React 還提供兩種特殊狀態的處理函數。

• componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
• shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否從新渲染時調用

　　

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

　　附加一個例子來記憶這個componentDidMount方法，當組件轉化爲真實DOM後調用的方法，控制透明度，這個方法我獨立寫過幾回，前2次都失敗了，仔細檢查以後發現<div style={{opacity:this.state.opacity}}>這裏容易出錯。你們須要注意注意。

　　結尾

　到這裏呢，react框架的筆記記錄完成，上面記錄的東西之後都須要常常反覆查看，而後沒事能夠本身用React寫一些東西玩玩，嗯，之後每次學習一些新知識都會記錄一下，這樣呢方便管理本身的知識線，之後若是有須要也能快速的回憶。

　 這段時間雖然很難受，但仍是磨練了個人耐性，我知道我會有一個美好的將來，我知道我之後必定會成爲一個對社會有用的人。感謝你們。