React核心知識

該文章以收錄 《React核心知識》

---

前言

本文章主要是總結了一些react的基礎知識和API, 這裏借鑑了一些其餘文章的內容，旨在大概的瞭解一下react的基礎知識。讀這篇文章以前，肯定你已經對react有了初步認識。

核心思想

react的核心思想有兩點：

• 聲明式渲染 (Declarative)

• 基於組件 (Component-Based)）

react渲染流程大致以下：

• 初始化的渲染流程分爲 3 步。

第一步，開發者使用 JSX 語法寫 React，babel 會將 JSX 編譯爲瀏覽器能識別的 React JS 語法。這一步，通常配合 webpack等工具 在本地進行。

第二步，執行 ReactDOM.render 函數，渲染出虛擬DOM樹。

第三步，react 將虛擬DOM，渲染成真實的DOM。

• 頁面更新的流程一樣也是 3 步。

第一步，當頁面須要更新時，經過聲明式的方法，調用 setState 告訴 react。

第二步，react 自動調用組件的 render 方法，渲染出虛擬 DOM。

第三步，react 會經過 diffing 算法，對比當前虛擬 DOM 和須要更新的虛擬 DOM 有什麼區別。而後從新渲染區別部分的真實 DOM。

JSX

JSX 就是 用來聲明 React 當中的元素, 最終將其渲染成真實的DOM。
JSX 只是爲 React.createElement(component, props, ...children) 方法提供的語法糖。

例如：

jsx的書寫方式：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

會先編譯爲：

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

組件

在react中定義組件有三種方式：函數定義 或者是 類定義組件，還能夠經過React.createClass() 來定義組件

函數定義的方法：

function Web(props){
  return <h1>hello,{props.name}</h1>
}

類定義組件方法：

clas Web extends React.Component{
    render(){
       return <h1>hello,{props.name}</h1>
    }
}

經過React.createClass() 來定義組件：

var Web = React.createClass({
    render(){
       return <h1>hello,{props.name}</h1>
    }
})

組件定義好後咱們就能夠直接渲染：

ReactDOM.render(
   Web,
   document.getElementById('root');
)

props 與 state

props是一種父級向子級傳遞數據的方式，子組件只能經過 props 來接收上級組件傳遞過來的數據。而且props是隻讀的，不管是使用函數或是類來聲明一個組件，它決不能修改它本身的props。也就是react組件必須向純函數那樣使用它們的props。

// 像這種沒有改變它本身的輸入值，當傳入的值相同時，
// 老是會返回相同的結果。這樣的函數被稱爲純函數。
function fun(a,b){
   return a + b;
}

一個組件的顯示形態能夠由數據狀態和外部參數所決定，外部參數也就是props，而數據狀態就是State。State能夠在不違反props只讀狀況下，根據用戶操做、網絡響應、或者其餘狀態變化，使組件動態的響應並改變組件的輸出。

組件API

• 設置狀態：setState(object nextState[, function callback])

• 替換狀態：replaceState(object nextState[, function callback])

• 設置屬性：setProps(object nextProps[, function callback])

• 替換屬性：setProps(object nextProps[, function callback])

• 強制更新：forceUpdate([function callback])

• 獲取DOM節點：findDOMNode()

• 判斷組件掛載狀態：isMounted()

生命週期

• 生命週期的三個狀態

  1. Mounting：已插入真實 DOM

  2. Updating：正在被從新渲染

  3. Unmounting：已移出真實 DOM

• 生命週期的方法

  1. componentWillMount 在渲染前調用

  2. componentDidMount : 在第一次渲染後調用

  3. componentWillReceiveProps在組件接收到一個新的prop時被調用。這個方法在初始化render時不會被調用

  4. shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。

  5. componentWillUpdate在組件接收到新的props或者state但尚未render時被調用。在初始化時不會被調用。

  6. componentDidUpdate 在組件完成更新後當即調用。在初始化時不會被調用

  7. componentWillUnmount在組件從 DOM 中移除的時候馬上被調用。

結束

借鑑文章：https://reactjs.org/tutorial/tutorial.html
借鑑文章：http://www.runoob.com/react/react-refs.html
借鑑文章：http://www.javashuo.com/article/p-trubutjt-kp.html