介紹描述
- 用于動態構建用戶界面的 JavaScript 庫(只關注于視圖)
- 由Facebook開源
React的特點
- 宣告式編碼
- 組件化編碼
- React Native 撰寫原生應用
- 高效（優秀的Diffing演算法）
命令式編程 和 宣告式編程
- 告訴計算機怎么做（How） - 程序
- 告訴計算機我們要什么（What） - 結果
如何使用 React
基于瀏覽器的模式
- React.js 提供 React.js 核心功能代碼，如：虛擬 dom，組件
- React.createElement(type,props,children);
- ReactDOM 提供了與瀏覽器互動的 DOM 功能，如：dom 渲染
- ReactDOM.render(element, container[, callback])
- element：要渲染的內容
- container：要渲染的內容存放容器
- callback：渲染后的回呼函式
- ReactDOM.render(element, container[, callback])
babel
babel-standalone.js：在瀏覽器中處理 JSX
- 瀏覽器不能直接決議JSX代碼, 需要babel轉譯為純JS的代碼才能運行
- 只要用了JSX，都要加上type=“text/babel”, 宣告需要babel來處理
效果圖:
React高效的原因
- 使用虛擬(virtual)DOM, 不總是直接操作頁面真實DOM，
- DOM Diffing演算法, 最小化頁面重繪，
在使用react 時需要引入核心模塊
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
//React核心庫，
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
//提供操作DOM的react擴展庫，
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
//決議JSX語法代碼轉為JS代碼的庫
react基本代碼效果圖
JSX 是一個基于 JavaScript + XML 的一個擴展語法,本質是React.createElement(component, props, …children)方法的語法糖
- 它可以作為值使用
- 它并不是字串
- 它也不是HTML
- 它可以配合JavaScript 運算式一起使用
創建虛擬DOM的兩種方式
- 純JS方式(一般不用)
- JSX方式
虛擬DOM與真實DOM
- React提供了一些API來創建一種 “特別” 的一般js物件
? const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
? 上面創建的就是一個簡單的虛擬DOM物件 - 虛擬DOM物件最終都會被React轉換為真實的DOM
- 我們編碼時基本只需要操作react的虛擬DOM相關資料, react會轉換為真實DOM變化而更新界，
插值運算式
在 JXS 中可以使用 {運算式} 嵌入運算式
運算式：產生值的一組代碼的集合
注意:
vue使用兩個花括號決議變數,react只用一個花括號決議變數
串列渲染
串列渲染(類似于vue里面的v-for)
- 陣列
- 物件
擴展：虛擬 DOM （virtualDOM） 和 diff
效果圖
條件渲染
- 三元運算子
- 與或運算子
效果圖
在屬性上使用 運算式
JSX 中的運算式也可以使用在屬性上，但是使用的時候需要注意
- 當在屬性中使用 {} 的時候，不要使用引號包含
這個是react的基本語法
下面我們來說一下react的專案安裝及其啟動
-
npm i -g create-react-app 全域安裝react,注意是安裝不是創建專案
-
yarn global add create-react-app
-
cnpm i -g create-react-app
大家可以根據自己的需求進行安裝
創建專案的命令
- create-react-app <專案名稱>
- npx create-react-app <專案名稱>
安裝專案以后使用npm start進行啟動專案
啟動專案成功效果圖
重點報錯
如果專案使用npm start 報錯的話輸入npm run eject,以后再使用npm start啟動專案
總結:
今天主要學習了react的基本語法,及其基本專案安裝,react相比vue更加復雜一點,但比vue更加靈活,但有一點是react創建專案時更加復雜,但更加容易報錯,比如我上面說的那個報錯,恐怕很多人都會遇到,希望大家在用到的時候一定要注意
最后作者創作不易,如果文章對你有幫助的話,記得留下你的點贊和關注呦
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290679.html
標籤：其他
下一篇：[JavaScript] 輪播圖 利用原生js的setTimeout結合CSS3的過渡transition實作輪播圖的無縫滾動