這篇博文主要涉及到初學React時所總結的內容,也是我從最開始的認識React到後面的逐漸深入學習的歷程,而這篇是開始,當然不會是結束。 ...
一、何為react
Facebook在F8會議上首次提出這個概念,一套全新的框架就此誕生。
- React 不是一個完整的 MVC、MVVM 框架,其只負責 View 層
- React 跟 Web Components 不衝突
- React 的特點就是“輕”,數據單向綁定,獨立、小巧、快速、創新
- 組件化的開發思路,小組件構成大組件,高度可重用
而react則廣泛應用於
- 複雜場景下的高性能
- 重用組件庫,組件組合
二、react組件基礎
1、react虛擬dom概念
當一個數據改變時,而你又需要將它實時反應到UI上時,你就需要對DOM進行操作,但是複雜或頻繁的DOM操作通常是性能瓶頸產生的原因,於是我們在app源碼和DOM之間加入了虛擬DOM(Virtual DOM)。
所以在React中,render執行的結果得到的並不是真正的DOM節點,結果僅僅是輕量級的JavaScript對象,我們稱之為virtual DOM
。
虛擬DOM是React的一大亮點,具有batching(批處理)和高效的Diff演算法。這讓我們可以無需擔心性能問題而”毫無顧忌”的隨時“刷新”整個頁面,由虛擬 DOM來確保只對界面上真正變化的部分進行實際的DOM操作。如果沒有 Virtual DOM
,簡單來說就是直接重置 innerHTML。這樣操作,在一個大型列表所有數據都變了的情況下,還算是合理,但是,當只有一行數據發生變化時,它也需要重置整個 innerHTML,這時候顯然就造成了大量浪費。
2、react組件
先來個小例子看看什麼是react組件,創建一個js文件
import React from 'react';
import ReactDom from 'react-dom';
export default class ComponentHeader extends React.Component{
render(){
return(
<header>
<h1>yondu is a good father</h1>
</header>
)
}
}
這個文件就創建了一個名為ComponentHeader
的組件,值得註意的是export default
是可以讓這個組件外用。
然後我們在一個項目的入口文件里引用這個組件
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';//組件文件的相對位置
class Index extends React.Component {
render(){
return(
<ComponentHeader/>
);
}
}//創建可以用ComponentHeader組件的組件Index
ReactDOM.render(<Index/>,document.getElementById('example'));//把你創建的組件在id為example的dom中使用
當然在render
中,你也可以用一個參數的形式,它的作用是可以用於判斷,例如
var component = <ComponentHeader/>//在render中,就可以直接用component代替<ComponentHeader/>
//所以可以有以下形式
if(ture){
component = <ComponentHeader/>
}
else{
component = <ComponentFooter/>
}
以上例子就是創建一個組件然後使用的過程,需要註意的地方是
- 組件的
return
函數里返回的html節點只能是一個,如有多個,可以在外麵包一個<div></div>
- 如果想讓組件外用,加上
export default
3、JSX內置表達式
三元表達式是JSX裡面經常使用的一種語法,我們先來看一看
render(){
var text="不為空";
return(
<p>{text == "" ? "內容為空" : "內容為"+text}/p>
)
}
首先表達式要用{}
包裹,然後三元表達式主要是看三元運算符,語法是 條件 ? 結果1 : 結果2;. 這裡你把條件寫在問號(?)的前面後面跟著用冒號(:)分隔的結果1和結果2。滿足條件時結果1否則結果2。
(b == 5) ? a="true" : a="false";
在JSX中用動態綁定時,參數需要用{}
包裹,而且外面不需要用引號,例如
render(){
var bool=true;
var name="點一下";
return(
<input type="button" value={name} disabled={bool}>
)
}
JSX中的註釋是這樣{/*註釋*/}
的形式
4、生命周期
可以利用生命周期函數做到鉤子函數(Hook)的很多功能
- 列表項
- component instantiated 組件初始化
- getDefaultProps( ) 獲取預設屬性的生命周期函數
- getInitialState( ) 獲取初始化
State
的函數 - componentWillMount( ) 組件將要載入
- render( ) 渲染
- componentDidMount( ) 組件載入完畢(第一次render( )完畢後)
- props changed 屬性更改
- componentWillReceiveProps( )
- shouldComponentUpdate( )
- componentWillUpdate( ) 組件將要更新
- render( )
- componentDidUpdate( ) 組件更新完畢(第一次render( )完畢,等組件載入完畢)
- setState( )
- component deleted
- componentWillUnmount( ) 組件卸載函數 (第一次render( )完畢,等組件更新完畢)
我們可以看看
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component {
componentWillMount(){
//直接寫邏輯
console.log("Index組件將要載入的時間");
}
render(){
return(
<ComponentHeader/>
);
}
componentDidMount(){
//直接寫邏輯
console.log("Index組件載入完畢的時間");
}
}
ReactDOM.render(<Index/>,document.getElementById('example'));
生命周期函數的運用如上就可見一斑了。