本文章主要是總結了一些react的基礎知識和API, 這裏借鑑了一些其餘文章的內容,旨在大概的瞭解一下react的基礎知識。讀這篇文章以前,肯定你已經對react有了初步認識。html
react的核心思想有兩點:react
聲明式渲染 (Declarative)webpack
基於組件 (Component-Based))web
react渲染流程大致以下:算法
初始化的渲染流程分爲 3 步。segmentfault
第一步,開發者使用 JSX 語法寫 React,babel 會將 JSX 編譯爲瀏覽器能識別的 React JS 語法。這一步,通常配合 webpack等工具 在本地進行。瀏覽器
第二步,執行 ReactDOM.render 函數,渲染出虛擬DOM樹。babel
第三步,react 將虛擬DOM,渲染成真實的DOM。網絡
頁面更新的流程一樣也是 3 步。函數
第一步,當頁面須要更新時,經過聲明式的方法,調用 setState 告訴 react。
第二步,react 自動調用組件的 render 方法,渲染出虛擬 DOM。
第三步,react 會經過 diffing 算法,對比當前虛擬 DOM 和須要更新的虛擬 DOM 有什麼區別。而後從新渲染區別部分的真實 DOM。
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是一種父級向子級傳遞數據的方式,子組件只能經過 props 來接收上級組件傳遞過來的數據。而且props是隻讀的,不管是使用函數或是類來聲明一個組件,它決不能修改它本身的props。也就是react組件必須向純函數那樣使用它們的props。
// 像這種沒有改變它本身的輸入值,當傳入的值相同時, // 老是會返回相同的結果。這樣的函數被稱爲純函數。 function fun(a,b){ return a + b; }
一個組件的顯示形態能夠由數據狀態和外部參數所決定,外部參數也就是props,而數據狀態就是State。State能夠在不違反props只讀狀況下,根據用戶操做、網絡響應、或者其餘狀態變化,使組件動態的響應並改變組件的輸出。
設置狀態: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()
生命週期的三個狀態
Mounting
:已插入真實 DOM
Updating
:正在被從新渲染
Unmounting
:已移出真實 DOM
生命週期的方法
componentWillMount
在渲染前調用
componentDidMount
: 在第一次渲染後調用
componentWillReceiveProps
在組件接收到一個新的prop時被調用。這個方法在初始化render時不會被調用
shouldComponentUpdate
返回一個布爾值。在組件接收到新的props
或者state
時被調用。在初始化時或者使用forceUpdate
時不被調用。
componentWillUpdate
在組件接收到新的props
或者state但尚未render
時被調用。在初始化時不會被調用。
componentDidUpdate
在組件完成更新後當即調用。在初始化時不會被調用
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