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寫一些東西玩玩，嗯，以后每次學習一些新知識都會記錄一下，這樣呢方便管理自己的知識線，以后如果有需要也能快速的回憶。

　這段時間雖然很難受，但還是磨練了我的耐性，我知道我會有一個美好的未來，我知道我以后一定會成為一個對社會有用的人。感謝大家。

posted @ 2016-03-20 22:21 櫻良orz 閱讀(852) 評論(1) 收藏舉報

刷新頁面返回頂部

小浩學長

It's always easy to say,hard to do.

React學習筆記。

公告