【React】- 一、React介紹

時間 2019-12-05

標籤 React react 介紹欄目 React 简体版

原文原文鏈接

React的開發背景

構建數據不斷變化的大型應用html

　　　　　　　　大量DOM操做　　　　<---- 自動DOM操做react

數據變化git

　　　　　　　　邏輯及其複雜　　　　 <---- 狀態對應內容（自動變化）github

特色：算法

　　- 簡單　　　　上手容易，代碼簡單瀏覽器

　　- 聲明式　　　框架

React 的核心是組件，組件的設計目的是提升代碼複用率、下降測試難度和代碼複雜度dom

提升代碼複用率：組件將 數據和邏輯封裝，相似面向對象中的類模塊化

下降測試難度：組件 高內聚低耦合，很容易對單個組件進行測試函數

下降代碼複雜度：直觀的語法 能夠極大提升可讀性

下載Facebook官方的基礎代碼

Emmet語法介紹

子代： >　　　　div>ul>li

<div>
	<ul>
		<li></li>
	</ul>
</div>

兄弟：+

父代：^　　　　div+div>p>span+em^bq　　

<div></div>
<div>
	<p><span></span><em></em></p>
	<blockquote></blockquote>
</div>

重複：*　　　　　　ul>li*5

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

成組：（）　　　　（div>dl>(dt+dd)*3)+footer>p

<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>
<footer>
	<p></p>
</footer>

ID：#

class：.　　　　div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

屬性: []　　　　td[title="Hello world!" colspan=3]　　　　

<td title="Hello world!" colspan="3"></td>

例子：　　　　(div+p#test>span.test2.test3)*5+p[name="hello"]>div.test4^a*5

<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<p name="hello">
	<div class="test4"></div>
</p>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>

html:5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

React 程序結構介紹

本質上就是一個HTML頁面，在HTML頁面中能夠編寫JS代碼（JSX代碼）和CSS代碼

也能夠把JS代碼和CSS代碼分別存儲到JS文件中和CSS文件中，最後引入到HTML頁面中

React 組件基礎

一、React虛擬DOM概念，這是React性能高效的核心算法

二、React組件，理解什麼佳偶走組件化

三、React多組件嵌套

四、JSX內置表達式

五、生命週期，縱觀整個React的生命週期

React屬性與事件

一、State屬性，控制着React的一切

二、Props屬性

三、事件與數據的雙向綁定，包含了父子頁面之間的參數互傳

四、可複用組件，真正讓React開發快速、高效的地方

五、組件的Refs

六、獨立組件間共享Mixins

React樣式

一、內聯樣式

二、內聯樣式中的表達式

三、CSS模塊化，學習如何使用require進行樣式的引用

四、JSX樣式與CSS的互換

五、一個很是好用的樣式框架Ant Design樣式框架介紹

六、Ant Design樣式框架使用

React Router

一、Router概念

二、Router參數傳遞

React 組件基礎

React虛擬DOM概念

開源算法

簡單示例

React組件生命週期

官方文檔：https://facebook.github.io/react/docs/react-component.html

Mounted:

React Components 被render解析生成對應的DOM節點，並被插入瀏覽器的DOM結構的一個過程

Update：

一個mounted的React Components被從新render的過程

Unmounted：

一個mounted的React Components對應的DOM節點被從DOM結構中移除的這樣一個過程

每個狀態React都封裝了對應的hook函數

React屬性與事件

State屬性

1. react router4介紹
2. react 介紹
3. 01-React介紹
4. 《React-Hooks 介紹》
5. React Loadable 介紹
6. react介紹
7. react框架介紹
8. react入門介紹
9. [譯] React Profiler 介紹
10. react Hook之介紹
更多相關文章...
• 網站主機介紹 - 網站主機教程
• Spring目錄結構和基礎JAR包介紹 - Spring教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• RxJava操作符（一）Creating Observables

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。