React學習之初入React世界

• JSX語法

1. JSX將HTML語法直接加入到JavaScript代碼中，再經過翻譯器裝換到純JavaScript後由瀏覽器執行。在實際開發中，JSX在產品打包階段都已經編譯成純JavaScript，不會帶來任何反作用，反而會讓代碼更加直觀並易於維護。
2. 事實上，JSX並不須要花精力學習。只要熟悉HTML標籤，大多數功能就均可以直接使用了。
3. JSX語法完美地利用了JavaScript自帶的語法和特性，並使用你們熟悉的HTML語法來建立虛擬元素。能夠說，JSX基本語法基本被XML囊括了，但也有少量不一樣。

• React組件

1. 基本的封裝性。
2. 簡單的生命週期呈現。
3. 明確的數據流動。

• React組件的構建方法

1. React.createClass
2. ES6 classes
3. 無狀態函數

• React數據流

在React中，數據是自頂向下單向流動的，即從父組件到子組件。這條原則讓組件之間的關係變得簡單且可預測。state與props是React組件中最重要的概念。若是頂層組件初始化props，那麼React會向下遍歷整顆組件樹，從新嘗試渲染全部相關的子組件。而state只關心每一個組件本身內部的狀態，這些狀態只能在組件內改變。把組件當作一個函數，那麼它接受了props做爲參數，內部由state做爲函數的內部參數，返回一個Virtual DOM的實現。

• React生命週期

1. 組件的掛載與卸載：componentWillMount方法會在render方法以前執行，而componentDidMount方法會在render方法以後執行，分別表明了渲染先後的時刻。還有componentWillUnmount表明組件卸載前的狀態，在這個方法中，咱們經常會執行一些清理方法，如事件回收或是清除定時器。
2. 更新過程是指父組件向下傳遞props或組件自身執行setState方法時發生的一系列更新動做。shouldComponentUpdate是一個特別的方法，它接受須要更新的props和state，讓開發者增長必要的條件判斷，讓其在須要時更新，不須要時不更新。所以，當方法返回false的時候，組件再也不向下執行生命週期方法。componentWillUpdate和componentDidUpdate這兩個生命週期方法很容易理解，對應的初始化方法也很容易知道，他們表明在更新過程當中渲染先後的時刻。

• getDerivedStateFromProps(props, state)

在 render() 以前觸發，無論是什麼緣由觸發 render() 方法的,此方法應返回一個對象，用於更新 State, 或返回 null 不更新。

• getSnapshotBeforeUpdate(prevProps, prevState)

在 Dom 改變以前得到一些最新的信息,此方法的一切返回值都將被傳遞給 componentDidUpdate 方法中的 snapshot 參數。

• componentDidCatch(err, info)

1. catch js 錯誤，log 這些 errors，顯示一個回調的 UI。
2. 獲取錯誤的時機：during rendering，生命週期函數和子組件的 constructor 函數。
3. 使用 setState() 獲取 unhandled JS errors 和 顯示回調 UI。

• ReactDOM

1. findDOMNode:React提供的獲取DOM元素的方法有兩種，其中一種就是ReactDOM提供的findDOMNode，當組件被渲染到DOM中，findDOMNode返回該React組件實例相應的DOM節點。
2. 爲何說只有在頂層組件咱們纔不得不使用ReactDOM呢？這是由於要把React渲染的Virtual DOM渲染到瀏覽器的DOM當中，就要使用render方法了，該方法把元素掛載到container中，而且返回element的實例。

• refs

在組件內，JSX是不會返回一個組件的實例的，它只是一個ReactElement，只是告訴React被掛載的組件應該長什麼樣。refs就是爲此而生的，它是React組件中很是特殊的prop，能夠附加到任何一個組件上。從字面意思來看，refs即reference，組件被調用時會新建一個該組件的實例，而refs就會指向這個實例，它能夠是一個回調函數，這個回調函數會在組件被掛載後當即執行。