? fengyu學(xué)習(xí)
今年9月，為了重構(gòu)的項(xiàng)目浑塞，在一個(gè)星期內(nèi)借跪，我囫圇吞棗似地學(xué)習(xí)了React。
即便是4個(gè)月后的今天缩举，回想起當(dāng)日，我還是會(huì)記得5個(gè)小伙伴，每天晚上從7點(diǎn)半起仅孩，就準(zhǔn)時(shí)到會(huì)議室里學(xué)習(xí)React的場(chǎng)景托猩，不免又覺得有些好笑。
如今辽慕，重構(gòu)的項(xiàng)目進(jìn)入了最后的聯(lián)調(diào)階段京腥，我也算是經(jīng)過了實(shí)戰(zhàn)的洗禮了，不過在探索React的路上跌跌撞撞溅蛉，確沒能留下半點(diǎn)記錄公浪，實(shí)屬遺憾。
我決定將這四個(gè)月的經(jīng)歷整理整理船侧，記錄下來欠气，已便將來更好的工作學(xué)習(xí)！
1镜撩、Why React?
這是我在項(xiàng)目初期一直在思考的問題预柒，為什么重構(gòu)的項(xiàng)目選擇了 React 。
最初我是這么想的
追求時(shí)尚新技術(shù)袁梗，好耶宜鸯，棒棒噠！
后來我發(fā)現(xiàn)了
健全的學(xué)習(xí)文檔及良好的社區(qū)github各種輪子需要兼容IE8
再后來我覺得是
數(shù)據(jù)驅(qū)動(dòng)視圖方便自定義UI
由于我們是第三方腳本遮怜，為了良好的兼容性淋袖，之前的腳本都是用 原生JS 。所以我對(duì)這么大的框架一下似乎也接受不了锯梁。
不過重構(gòu)的負(fù)責(zé)人 XB 哥還是說服了我即碗。
今日帶寬不比往日React@14做了拆分，可以有選擇性的引用
加上我的內(nèi)心也是向往新技術(shù)的涝桅。
經(jīng)過了一段時(shí)間的使用拜姿，我覺得 React 確實(shí)有其獨(dú)特之處，相較于 原生JS 的好處：
JSX語(yǔ)法冯遂，擁有清晰的dom結(jié)構(gòu)和樣式引用蕊肥，帶來與原生JS創(chuàng)建DOM不一樣的體驗(yàn)數(shù)據(jù)驅(qū)動(dòng)視圖，一定程度上簡(jiǎn)化了視圖與邏輯分離的難度
下面就開始干貨吧蛤肌！
2壁却、組件、state與props
Component 是 React 中重要的組成部分裸准，大至整個(gè)頁(yè)面展东，小到一個(gè)按鈕，都有可能是一個(gè)組件炒俱。
而 state 與 props 則是一個(gè)組件綻放光彩的必備良藥盐肃！
舉個(gè)栗子：
import React, {Component} from "react";
import ReactDOM from "react-dom";
class SimpleComponent extends Component {
constructor(props) {
super(props)
}
render() {
return <div>我只是我</div>
}
}
ReactDOM.render(<SimpleComponent/>, document.getElementById('app'));
如此一來 SimpleComponent 組件的 render() 方法就將一個(gè)最簡(jiǎn)單的組件渲染到了網(wǎng)頁(yè)上爪膊，這與html并沒有什么區(qū)別，并不能展現(xiàn) React 的強(qiáng)大威力砸王！
下面我們使用 state 給這個(gè) SimpleComponent 做做包裝
import React, {Component} from "react";
import ReactDOM from "react-dom";
class SimpleComponent1 extends Component {
constructor(props) {
super();
this.state = {
content: '我就是我推盛，那顏色不一樣的煙火',
color: '#F00'
};
}
render() {
let style = {
color: this.state.color
}
return <p style={style}>{this.state.content}</p>
}
componentDidMount() {
setInterval(() => {
this.setState({
color: this.state.color === '#F00' ? '#0F0' : '#F00'
})
}, 1000);
}
}
ReactDOM.render(
<div>
<SimpleComponent/>
<SimpleComponent1/>
</div>,
document.getElementById('app'));
在 componentDidMount() （React 組件自帶方法，在第一次執(zhí)行 render() 方法后執(zhí)行谦铃，表示組件已經(jīng)加載完畢）中采用 setState() 方法（ React 組件自帶方法耘成，能夠設(shè)置 this.state 中屬性的值）對(duì) this.state 中的 color 屬性進(jìn)行設(shè)置，使得組件的顏色能夠動(dòng)態(tài)改變驹闰。
可以看到瘪菌，利用 state ，我們可以輕松的實(shí)現(xiàn) DOM 的渲染嘹朗，而不需要直接操作 DOM师妙，但是僅僅有 state ，似乎還缺少了些什么骡显，我們還可以利用 props 疆栏，將這個(gè)組件更加的完善！
class SimpleComponent2 extends Component {
constructor(props) {
super(props);
this.state = {
content: this.props.content,
color: '#F00'
}
}
render() {
let style = {
color: this.state.color
}
return <p style={style}>{this.state.content}</p>
}
componentDidMount() {
setInterval(() => {
this.setState({
color: this.state.color === '#F00' ? '#0F0' : '#F00'
})
}, 1000);
}
}
ReactDOM.render(
<div>
<SimpleComponent/>
<SimpleComponent1/>
<SimpleComponent2 content="我就是我惫谤，顏色不一樣的煙火"/>
<SimpleComponent2 content="我也是煙火哦"/>
</div>,
document.getElementById('app'));
首先 props 是依賴外部傳入的壁顶，如上代碼 <SimpleComponent2 content="我也是煙火哦"/> 。
其次在 Component 中使用 props 是直接調(diào)用 this.props.屬性名稱 的溜歪。
了解清楚了 props 的用法若专，再來談?wù)勈褂玫谋匾浴?/p>
組件庫(kù)（泛指如：按鈕、日歷蝴猪，樹调衰，表格、列表自阱、網(wǎng)格）等基礎(chǔ)組件嚎莉，編寫的目的是為了方便使用的。
盡管上面舉的例子并不復(fù)雜沛豌，然而如果我們需要在多個(gè)頁(yè)面使用這個(gè)效果時(shí)趋箩，并不是在每個(gè)頁(yè)面都寫一個(gè)這樣的組件。
而是提取出組件的共同點(diǎn)加派，找出他們的不同點(diǎn)叫确，共同點(diǎn)利用 state 來實(shí)現(xiàn)，不同點(diǎn)利用 props 傳入芍锦，來達(dá)到復(fù)用組件的目的
其實(shí) state 與 props 的作用還不止這些竹勉，在后續(xù)的總結(jié)中，還有父子組件通信方面的作用娄琉。
3次乓、寫在文末
React 的故事才剛剛開始吓歇，接觸React的時(shí)間也不算太長(zhǎng)。如有描述不周的地方票腰，請(qǐng)斧正照瘾，萬分感謝。
相關(guān)代碼丧慈，可以在github上下載
從6月到現(xiàn)在，已有半年沒有寫文章了主卫。雖說很忙逃默，亦不過是借口而已！
慶幸自己能在 2017 年的初始簇搅，重新拾起總結(jié)的習(xí)慣完域，新年新氣象嘛，加油瘩将！
