資訊專欄INFORMATION COLUMN
摘要：語法將語法直接加入到代碼中，再通過翻譯器裝換到純后由瀏覽器執行。事實上，并不需要花精力學習。可以說，基本語法基本被囊括了，但也有少許不同。明確的數據流動。這條原則讓組件之間的關系變得簡單且可預測。使用獲取和顯示回調。
JSX語法
JSX將HTML語法直接加入到JavaScript代碼中，再通過翻譯器裝換到純JavaScript后由瀏覽器執行。在實際開發中，JSX在產品打包階段都已經編譯成純JavaScript，不會帶來任何副作用，反而會讓代碼更加直觀并易于維護。
事實上，JSX并不需要花精力學習。只要熟悉HTML標簽，大多數功能就都可以直接使用了。
JSX語法完美地利用了JavaScript自帶的語法和特性，并使用大家熟悉的HTML語法來創建虛擬元素。可以說，JSX基本語法基本被XML囊括了，但也有少許不同。
React組件
基本的封裝性。
簡單的生命周期呈現。
明確的數據流動。
React組件的構建方法
React.createClass
ES6 classes
無狀態函數
React數據流
在React中，數據是自頂向下單向流動的，即從父組件到子組件。這條原則讓組件之間的關系變得簡單且可預測。state與props是React組件中最重要的概念。如果頂層組件初始化props，那么React會向下遍歷整顆組件樹，重新嘗試渲染所有相關的子組件。而state只關心每個組件自己內部的狀態，這些狀態只能在組件內改變。把組件看成一個函數，那么它接受了props作為參數，內部由state作為函數的內部參數，返回一個Virtual DOM的實現。
React生命周期
組件的掛載與卸載：componentWillMount方法會在render方法之前執行，而componentDidMount方法會在render方法之后執行，分別代表了渲染前后的時刻。還有componentWillUnmount代表組件卸載前的狀態，在這個方法中，我們常常會執行一些清理方法，如事件回收或是清除定時器。
更新過程是指父組件向下傳遞props或組件自身執行setState方法時發生的一系列更新動作。shouldComponentUpdate是一個特別的方法，它接受需要更新的props和state，讓開發者增加必要的條件判斷，讓其在需要時更新，不需要時不更新。因此，當方法返回false的時候，組件不再向下執行生命周期方法。componentWillUpdate和componentDidUpdate這兩個生命周期方法很容易理解，對應的初始化方法也很容易知道，他們代表在更新過程中渲染前后的時刻。
getDerivedStateFromProps(props, state)
在 render() 之前觸發，不管是什么原因觸發 render() 方法的,此方法應返回一個對象，用于更新 State, 或返回 null 不更新。
getSnapshotBeforeUpdate(prevProps, prevState)
在 Dom 改變之前獲得一些最新的信息,此方法的一切返回值都將被傳遞給 componentDidUpdate 方法中的 snapshot 參數。
componentDidCatch(err, info)
catch js 錯誤，log 這些 errors，顯示一個回調的 UI。
獲取錯誤的時機：during rendering，生命周期函數和子組件的 constructor 函數。
使用 setState() 獲取 unhandled JS errors 和 顯示回調 UI。
ReactDOM
findDOMNode:React提供的獲取DOM元素的方法有兩種，其中一種就是ReactDOM提供的findDOMNode，當組件被渲染到DOM中，findDOMNode返回該React組件實例相應的DOM節點。
為什么說只有在頂層組件我們才不得不使用ReactDOM呢？這是因為要把React渲染的Virtual DOM渲染到瀏覽器的DOM當中，就要使用render方法了，該方法把元素掛載到container中，并且返回element的實例。
refs
在組件內，JSX是不會返回一個組件的實例的，它只是一個ReactElement，只是告訴React被掛載的組件應該長什么樣。refs就是為此而生的，它是React組件中非常特殊的prop，可以附加到任何一個組件上。從字面意思來看，refs即reference，組件被調用時會新建一個該組件的實例，而refs就會指向這個實例，它可以是一個回調函數，這個回調函數會在組件被掛載后立即執行。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105572.html
摘要：學習之道簡體中文版通往實戰大師之旅掌握最簡單，且最實用的教程。前言學習之道這本書使用路線圖中的精華部分用于傳授，并將其融入一個獨具吸引力的真實世界的具體代碼實現。完美展現了的優雅。膜拜的學習之道是必讀的一本書。 《React 學習之道》The Road to learn React (簡體中文版) 通往 React 實戰大師之旅：掌握 React 最簡單，且最實用的教程。 showIm...
摘要：是用戶建立客戶端應用的前端架構，它通過利用一個單向的數據流補充了的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用。結構和數據流一個單向數據流是模式的核心。 Flux是Facebook用戶建立客戶端Web應用的前端架構，它通過利用一個單向的數據流補充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用Flux。 ...
摘要：前言以深入學習技術棧為線索，記錄下學習的重要知識內容。要傳入時，必須使用屬性表達式。如果要使用自定義屬性，要使用前綴這與標準是一致的。 前言 以《深入學習react技術棧》為線索，記錄下學習React的重要知識內容。本系列文章沒有涵蓋全部的react知識內容，只是記錄下了學習之路上的重要知識點，一方面是自己的總結，同時拿出來和在學習react的人們一塊分享，共同進步。 正文 一：rea...
摘要：用于規范的類型與必需的狀態。表示由組件更改的數據，通常是通過與用戶的交互來更改的。為了實現的修改，需要注冊事件處理程序到相應的元素上。當事件發生時，將更新后的值是從中檢索，并通知組件。通常情況下，該函數初始化狀態使用，，或其他數據存儲。 前言 上一篇文章中，我們講到了JSX的一些用法和注意事項，這次我們來講react中最基礎也是特別重要的內容：組件。這篇文章包含組件的以下內容：狀態、屬...
摘要：根據的類型不同，分別實例化類。并且處理特殊屬性，比如事件綁定。之后根據差異對象操作元素位置變動，刪除，添加等。各個組件獨立管理層層嵌套，互不影響，內部實現的渲染功能。根據基本元素的值，判斷是否遞歸更新子節點，還是刪除舊節點，添加新節點。 首先理解ReactElement和ReactClass的概念。想要更好的利用react的虛擬DOM，diff算法的優勢，我們需要正確的優化、組織rea...
閱讀 3062·2023-04-26 00:40
閱讀 2401·2021-09-27 13:47
閱讀 4254·2021-09-07 10:22
閱讀 2971·2021-09-06 15:02
閱讀 3316·2021-09-04 16:45
閱讀 2503·2021-08-11 10:23
閱讀 3607·2021-07-26 23:38
閱讀 2907·2019-08-30 15:54
