react簡介
react 是專注于view層的UI庫。
優(yōu)點：
1柳骄、跨平臺。Learn Once,Write Anywhere. 跨平臺是react最大的亮點秘通。react-native提供相應(yīng)的組件如view伟端、Text、TextInput等澡绩，組件依賴react如生命周期、狀態(tài)俺附。
react-native基于Virtual DOM 渲染出原生控件肥卡，react組件可映射為對應(yīng)的原生控件∈铝停可輸出Web Dom, ios控件步鉴，安卓控件。
2璃哟、組件化氛琢。組件化的好處在于可以隔離，每個組件都有自己的生命周期随闪，便與管理維護阳似、修改、測試和閱讀
3蕴掏、Virtual DOM障般。真實頁面對應(yīng)一個DOM樹调鲸。react把真實DOM樹轉(zhuǎn)換成javascript對象樹，也就是Virtual DOM挽荡。
每次數(shù)據(jù)更新都將重新計算Virtual DOM并與上一次生成的Virtual DOM做對比藐石，對發(fā)生變化的部分做“批量更新”，
使用shouldComponentUpdate生命周期回調(diào)來減少數(shù)據(jù)變化后不必要的Virtual DOM對比過程定拟，提升性能于微。(構(gòu)建與更新都在內(nèi)存中完成)
4、函數(shù)式編程青自。
1）代碼簡潔株依，開發(fā)快速。
2）接近自然語言延窜，易于理解恋腕。
3）更方便的代碼管理。
4）易于"并發(fā)編程"逆瑞。
（注：函數(shù)是"第一等公民"荠藤，指的是函數(shù)與其他數(shù)據(jù)類型一樣，處于平等地位获高，可以賦值給其他變量函數(shù)式編程要求哈肖，只使用表達(dá)式，不使用語句念秧。也就是說淤井，
每一步都是單純的運算，而且都有返回值摊趾。函數(shù)式編程強調(diào)沒有"副作用"币狠，意味著函數(shù)要保持獨立，所有功能就是返回一個新的值严就，沒有其他行為总寻，
尤其是不得修改外部變量的值。引用透明梢为，函數(shù)的運行不依賴于外部變量或"狀態(tài)"，只依賴于輸入的參數(shù)轰坊，任何時候只要參數(shù)相同铸董，引用函數(shù)所得到的返回值總是相同的。）
5肴沫、jsx語法糖粟害。(靜態(tài)編譯)
6、大廠與生態(tài)颤芬。
以上優(yōu)點并非react獨有悲幅，但也算集各大優(yōu)勢于一身套鹅。
鏈接 靜態(tài)編譯，CoffeeScript
jsx語法
1汰具、類xml語法卓鹿。標(biāo)簽一定要閉合，只允許被一個標(biāo)簽包裹留荔。
2吟孙、DOM元素與組件元素，Title生成組件元素聚蝶，Menu中的ul生成DOM元素杰妓。
3、注釋碘勉。{/* content */}
4巷挥、Es6 rest/spread, 表達(dá)式{}
5、元素屬性验靡，省略屬性值皆默認(rèn)為true句各。className替換class,htmlFor替換for;其它onClick, onLoad,fontSize,data-name,checked...
const titleLayout = {
xs: { span: 2, offset: 0 },
xl: { span: 2, offset: 0 },
lg: { span: 2, offset: 0 },
md: { span: 2, offset: 0 },
sm: { span: 2, offset: 0 },
style: {
width: 160,
border: '1px solid #eee',
padding: 0,
minHeight: 45,
overFlow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 12,
},
}
const Title = () => (
{/*
checked省略屬性值默認(rèn)為true
*/}
<div className="title" {...titleLayout} data-name="menu" onClick={(e) => this.handle(e)} checked>
{
true ? 'menu' : (
<em>title</em>
)
}
</div>
)
const Menu = () => (
<ul>
{/*<li>menu1</li>
<li>menu2</li>*/}
<li>menu3</li>
<li>menu4</li>
<li><Title /></li>
</ul>
)
const Layout = () => (
<Menu />
)
6、動態(tài)html
const htmlTemplate = `
<div>
<div><img src="..." /><div>
<article>
<header>
<h1>title</h1>
</header>
<content>
<p>content</p>
<content/>
</article>
</div>
`
const Article = () => (
<div>
......
<div dangerouslySetInnerHTML={
_html: {htmlTemplate}
} />
</div>
)
7晴叨、HTML轉(zhuǎn)義凿宾。react會將所有要顯示到DOM的字符串轉(zhuǎn)義，防止xss兼蕊。
<div dangerouslySetInnerHTML={
_html: `© 2018`
} />
react生命周期
react生命周期
鏈接 圖解ES6中的React生命周期
import React, { Component, PropTypes } from 'react'
export default class App extends Component {
// 靜態(tài)類型檢測
static propTypes = {
name: PropTypes.string,
handle: PropTypes.func
}
// 默認(rèn)類型
static defaultProps = {
name: '秦橋云課堂'
}
//
constructor(props) {
super(props)
this.state = {
logo: 'https://...'
}
}
}
1初厚、PropTypes 由于javascript不是強類型語言。react補足靜態(tài)類型檢測孙技，開發(fā)環(huán)境中會在控制臺打印warning日志产禾，正式環(huán)境不檢測
2、propTypes 和defaultProps分別代表props類型檢測和默認(rèn)類型牵啦。都被聲明為靜態(tài)屬性亚情，意味著從類外面可以訪問到： App.propsTypes.name，App.defaultProps.name
con
組件初始化
// 靜態(tài)類型檢測
static propTypes = {
name: PropTypes.string,
handle: PropTypes.func
}
// 設(shè)置組件的默認(rèn)屬性
static defaultProps = {
name: '秦橋云課堂'
}
// 設(shè)置組件的初始化狀態(tài)
constructor(props) {
super(props)
this.state = {
logo: 'https://...'
}
}
//在render()方法之前哈雏，setState不會發(fā)生重新渲染(re-render)
//服務(wù)端渲染(server render)中唯一調(diào)用的鉤子(hook)
//推薦用constructor()方法代替
componentWillMount() {
console.log('componentWillMount')
}
//組件渲染后觸發(fā),可以進行DOM相關(guān)的操作
//setState()方法觸發(fā)重新渲染
componentDidMount() {
console.log('componentDidMount')
}
//props更新觸發(fā)
componentWillReceiveProps() {
console.log('componentWillReceiveProps')
}
//首次渲染時或者forceUpdate()時不會觸發(fā)
//返回false阻止重新渲染
shouldComponentUpdate() {
console.log('shouldComponentUpdate')
//return false
return true
}
//state更新觸發(fā)
componentWillUpdate() {
console.log('componentWillUpdate')
}
componentDidUpdate() {
console.log('componentDidUpdate')
}
componentWillUnmount() {
console.log('componentWillUnmount')
}
//組件渲染
render() {
console.log('render')
const { test } = this.props || ''
return (
<div>test, {test} </div>
)
}
UI組件
1楞件、宿主容器掛載后未更新state
首次掛載
componentWillMount
render
componentDidMount
props更新
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
卸載
componentWillUnmount
2、宿主容器掛載后又更新更新state
掛載
componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
卸載
componentWillUnmount
容器組件
1裳瘪、未更新state
componentWillMount
render
componentDidMount
2土浸、更新state
componentWillMount
render
componentDidMount
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
