React學習日記1
阿新 • • 發佈：2022-04-11
001
React Introduction
react只需要關注頁面，react是將資料渲染成HTML檢視的開源JavaScript庫
Facebook開發
原生JS的缺點
- 原生JavaScript操作DOM繁瑣效率低（DOM-API操作UI）
- 使用JavaScript直接操作DOM，瀏覽器會引起大量的重繪重排
- 原生JavaScript沒有元件化的編碼方案，程式碼複用率低
React的特點
- 採用元件化模式，宣告式編碼，提高開發效率和元件複用率
- 在React Native中可以使用React語法進行移動端開發（Android，iOS）
- 使用虛擬DOM+DIff演算法，儘量減少與真實DOM的互動
002
babel.min.js：
- ES6 ⇒ ES5
- jsx ⇒ js
一個hello React案例
<!-- 這三個核心庫引入一定要按照順序 --> <!-- 引入核心庫 --> <script src="<https://unpkg.com/react@^16/umd/react.production.min.js>"></script> <!-- 通過react操作DOM --> <script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>"></script> <!-- Babel --> <script src="<https://unpkg.com/[email protected]/babel.js>"></script> <body> <!-- 準備好一個容器 --> <div id="test"></div> <!-- 此處一定要寫Babel --> <script type="text/babel"> // 1. 這裡不用加引號 const VDOM = <h1>hello, React</h1> // 2. 渲染虛擬DOM到頁面 這裡接收兩個引數（第一個是渲染的DOM，第二個是容器） ReactDOM.render(VDOM, document.getElementById('test')) </script> </body>
003
建立虛擬DOM的兩種方式
1. 使用jsx
<script type="text/babel">
const VDOM = <h1 id="title">hello, React</h1>
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
2. 通過js[不推薦] 最終jsx會被Babel翻譯成js這樣 <script type="text/javascript"> const VDOM = React.createElement('h1',{id:'title'},'hello react') ReactDOM.render(VDOM, document.getElementById('test')) </script>