react學習-react入門

阿新 • • 發佈：2021-08-28

react入門[js的編寫]

react介紹

用於動態構建使用者介面的javascript庫
由facebook開源

react特點

宣告式編碼
元件化編碼
React Native編寫原生應用
高效[Diffing演算法]

react高效的原因

使用虛擬DOM,不總是直接操作頁面的真實DOM
DOM Diffing演算法，最小頁面重繪

react的基本使用

       #### react相關js庫

react.js: react核心庫
react-dom.js: 提供操作DoM的react擴充套件庫
babel.min.js: 解析JSX語法程式碼轉化為JS程式碼的庫

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>
<body>
	<!-- 準備好一個“容器” -->
	<div id="test"></div>

	<!-- 引入react核心庫 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用於支援react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用於將jsx轉為js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" > /* 此處一定要寫babel */
		//1.建立虛擬DOM
		const VDOM = <h1>Hello,React</h1> /* 此處一定不要寫引號，因為不是字串 */
		//2.渲染虛擬DOM到頁面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

虛擬DOM的兩種建立方式

jsx建立

const VDOM = (  
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)

js建立（不常用）

//由React提供了一些API來建立一種 “特別” 的一般js物件
const VDOM = 
React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))

真實DOM與虛列DOM

虛擬DOM物件最終都會被React轉化成為真實DOM
編碼時只需操作虛擬DOM相關的資料

Jsx語法規則

定義虛擬DOM時，不要寫引號
標籤中混入js表示式要用{}
樣式的類名指定不要用class,要用className
內聯樣式，要用style={{key:value}}的形式去寫
只能有一個根標籤
標籤首字母
- 若小寫字母開頭，則將該標籤轉為html中同名元素，若html中無該標籤對應的同名元素，則報錯。
- 若大寫字母開頭，react就去渲染對應的元件，若元件沒有定義，則報錯

react中的定義元件

函式式元件

<script type="text/babel">
		//1.建立函式式元件
		function MyComponent(){
			console.log(this); //此處的this是undefined，因為babel編譯後開啟了嚴格模式
			return <h2>我是用函式定義的元件(適用於【簡單元件】的定義)</h2>
		}
		//2.渲染元件到頁面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			執行了ReactDOM.render(<MyComponent/>.......之後，發生了什麼？
					1.React解析元件標籤，找到了MyComponent元件。
					2.發現元件是使用函式定義的，隨後呼叫該函式，將返回的虛擬DOM轉為真實DOM，隨後呈現在頁面中。
		*/
	</script>

類式元件

<script type="text/babel">
		//1.建立類式元件
		class MyComponent extends React.Component {
			render(){
				//render是放在哪裡的？—— MyComponent的原型物件上，供例項使用。
				//render中的this是誰？—— MyComponent的例項物件 <=> MyComponent元件例項物件。
				console.log('render中的this:',this);
				return <h2>我是用類定義的元件(適用於【複雜元件】的定義)</h2>
			}
		}
		//2.渲染元件到頁面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			執行了ReactDOM.render(<MyComponent/>.......之後，發生了什麼？
					1.React解析元件標籤，找到了MyComponent元件。
					2.發現元件是使用類定義的，隨後new出來該類的例項，並通過該例項呼叫到原型上的render方法。
					3.將render返回的虛擬DOM轉為真實DOM，隨後呈現在頁面中。
		*/
	</script>