技術標籤：reactjs

React

React是一個用於構建使用者介面的js庫

1、React由來:

facebook團隊內部專案，2013年5月份開源

2、React特點：

• 宣告式
• 元件化
• 一次學習，隨處編寫

React在16.x版本後釋出了一個Fiber協調引擎，採用增量式渲染，內部使用分片思想，解決diff演算法同步更新導致的瀏覽器卡頓問題。

3、引入：

npm init -y 建立package.json配置檔案
npm i react react-dom babel-standalone -S

本地引入：

<script src="./js/react.development.js"
 
></script>
<script src="./js/react-dom.development.js"></script>

CDN引入：

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"
 
></script>

注：將script的type屬性變成： text/babel才可以解析< 符號

Hello World案例：

```javascript
<div id="app"></div>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"
 
></script>
<script type="text/babel">
  console.log(ReactDOM);
  // 用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
  ReactDOM.render(<h1>Hello World！</h1>,document.getElementById("app"))
</script>

4、jsx編譯原理

jsx程式碼：JavaScript+Xml
Babel會把jsx轉譯成一個名為React.createElement()函式使用

注意：

• jsx中只能有一個根元素!
• jsx標籤需要閉合
• jsx註釋{ /* jsx程式碼 */ }

原理：開發階段只需要寫jsx程式碼，內部的化通過babel將jsxx轉譯成虛擬dom，最後通過ReactDOM.render進行虛擬dom渲染成真實DOM

<div id="app"></div>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

<script type="text/babel">
  // let el = <div><h1 className="h1">Hello world!</h1><p>我是標籤p</p></div>
  let el = React.createElement('div',{},
    React.createElement('h1',{className:"h1"},'Hello World!'),
    React.createElement('p',{},'我是標籤p')
  )
  ReactDOM.render(el,document.getElementById("app"))
</script>

5、表示式

{ }：

react中可以通過{ }的形式渲染一個變量表達式{ }中null/undefined/boolean是不會顯示的。
表示式中如果放入陣列，內部拼接成字串。

注意:

表示式中不能直接放入json物件

let a = 100
ReactDOM.render(<div>
  <p>{ a }</p>
  <p>{ false }</p>
  <p>{ '10' }</p>
  <p>{ [1,2,3] }</p>
  {/*<p>{ {a:1} }</p>*/}
  <p>{ function(){return 3}() }</p>
</div>,document.getElementById("app"))

結果：