react教程 (經過script引入)

時間 2019-12-10

原文原文鏈接

一、React 入門實例教程：http://www.ruanyifeng.com/blog/2015/03/react.html （阮一峯的博客）或 http://www.javashuo.com/article/p-ehnkykkb-k.html（做爲閱讀參考）html

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

注意：Browser.js 的做用是將 JSX 語法轉爲 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。vue

二、ReactDOM.render() ：將模板轉爲 HTML 語言，並插入指定的 DOM 節點。render() 裏面的參數是 JSX 語法。這個方法相似於 vue 的，new Vue()，啓動 react 引擎。react

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

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

注意：JSX 語法不是 JS 引擎解析的，因此不要徹底使用js的語法規則去分析 JSX 代碼。JSX 編譯後的代碼纔是 js 代碼。segmentfault

三、組件：服務器

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

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

注意，組件類的第一個字母必須大寫，不然會生效，好比HelloMessage不能寫成helloMessage。另外，組件類只能包含一個頂層標籤，不然也會生效。babel

四、this.props.children ：參考，阮一峯的教程數據結構

五、PropTypes ：參考，阮一峯的教程dom

六、獲取真實的DOM節點：參考教程性能

組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。只有當它插入文檔之後，纔會變成真實的 DOM 。

根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，它能夠極大提升網頁的性能表現。

七、其餘的參考教程