目錄
1、script钢颂。
2钞它、jsx語法
3、綁定事件
4、函數(shù)組件
5遭垛、解析html
6尼桶、遍歷
7、判斷
8锯仪、slot插值
9泵督、jsx編譯
10、創(chuàng)建組件---createClass
11庶喜、創(chuàng)建組件---component(es6)
12小腊、組件通信
13、表單內(nèi)容
14久窟、性能優(yōu)化
15秩冈、路由
16、路由傳參
17斥扛、生命周期
18入问、key的作用
19、狀態(tài)（state）和屬性（props）之間有何不同
20犹赖、虛擬dom
21队他、為什么說虛擬dom會提高性能？
22峻村、diff算法
23麸折、dva：js和jsx的區(qū)別
24、dva：路由跳轉(zhuǎn)
25粘昨、刷新攔截
正文
1垢啼、script。默認type='text/javascript'
- <script type='text/babel'>张肾，頁面在加載時會被browser.js編譯成真正的js插入頁面中芭析。
2、jsx語法
- jsx是js和html混合的寫法吞瞪，遇到<>以html形式進行解析馁启，遇到{}以js形式進行解析。
3芍秆、綁定事件
- 不傳參：例：<div onClick={f1}></div>
- 傳參：例：<div onClick={(e)=>{f2(100,e)}}></div>
4惯疙、函數(shù)組件（將模板return出去）
普通函數(shù)調(diào)用：例：{Ipt()}
組件形式調(diào)用：例：<Ipt a='10' b={20}></Ipt>。參數(shù)用props接收妖啥。定義時首字母大寫霉颠。
5、解析html
dangerouslySetInnerHTML（==v-html）：例：
<div dangerouslySetInnerHTML={{__html:str_x}}></div>
6荆虱、遍歷
7蒿偎、判斷
8朽们、slot插值
- 通過props.children獲得。
9诉位、jsx編譯
var x = <div id="box"> hello </div>
var x = React.createElement("div",{id:"box"},[React.createElement("em",{key:1},"hello"),React.createElement("span",{key:2},"span")])
10骑脱、創(chuàng)建組件---createClass
- createClass：React.createClass({})
- getInitialState：組件內(nèi)部的狀態(tài)，可相應的不从，是一個function返回對象惜姐。例：
getInitialState(){
return {
num:0
}
}
- render：定義模板。this指向組件實例椿息。例：
render(){
return(
<div>
<button onClick={()=>{this.increase(100)}}></button>
</div>
)
}
- 方法歹袁。方法內(nèi)部本身為null，改變this指向后寝优，this指向組件實例条舔。例：
increase(a){
this.setState({ // 修改狀態(tài)；訪問狀態(tài)：this.state.val
num:this.state.num+a
},()=>{ // 數(shù)據(jù)變化乏矾，DOM更新之后執(zhí)行函數(shù)孟抗，類似于Vue nextTick
console.log(this.refs.txt.innerHTML) // 操作DOM
})
}
因為setState是一個異步的過程，所以說執(zhí)行完setState之后不能立刻更改state里面的值钻心。如果需要對state數(shù)據(jù)更改監(jiān)聽凄硼，setState提供第二個參數(shù)，就是用來監(jiān)聽state里面數(shù)據(jù)的更改捷沸，當數(shù)據(jù)更改完成摊沉，調(diào)用回調(diào)函數(shù)。
11痒给、創(chuàng)建組件---component(es6)
class App extends React.Component{}
- constructor：定義自身的方法和屬性说墨。例：
constructor(props){
super(props); // 繼承
this.state={
num:100
}
}
12、組件通信 原文鏈接
- 父--->子：父組件通過向子組件傳遞props苍柏，子組件得到props后進行相應的處理尼斧。
- 子--->父：利用回調(diào)函數(shù)，可以實現(xiàn)子組件向父組件通信：父組件將一個函數(shù)作為props傳遞給子組件试吁，子組件調(diào)用該回調(diào)函數(shù)棺棵，便可以向父組件通信。
- 兄弟：react-redux 原文鏈接 redux是react中常用的一個進行集中狀態(tài)管理的工具熄捍，當一個狀態(tài)被多個狀態(tài)所訪問時律秃，傳統(tǒng)組件通信過于繁瑣，可以將狀態(tài)放入redux治唤。
13、表單內(nèi)容
<input type="text" value={this.state.val} onChange={(e)=>{this.setState({val:e.target.value})}}/>
14糙申、性能優(yōu)化
- 組件內(nèi)部調(diào)用setState宾添，當前組件及子組件都會重新渲染船惨，生命周期并不會重復執(zhí)行。
- shouldComponentUpdate：決定組件是否重新渲染缕陕，return true 渲染粱锐。可以避免不必要的dom操作扛邑。
- PureComponent：class Index extends React.PureComponent{}
- 使用路由懶加載怜浅。
- 使用key來幫助React識別列表中所有子組件的最小變化。
15蔬崩、路由
路由暴露對象是ReactRouterDom恶座。例：
let { HashRouter, Route, Link, Redirect, Switch, withRouter} = ReactRouterDom
- Route包裹路由組件。例：<Route path='/' component={Index}/>
- Link類似于vue中 router-link沥阳。例：<Link to='/'> 首頁 </Link>
- NavLink：是Link的一個特定版本跨琳，會在匹配上當前的url的時候，給已經(jīng)渲染的元素添加 樣式 參數(shù)桐罕。原文鏈接
- BrowserRouter（路徑不帶#）脉让、HashRouter（路徑帶#）限定路由使用區(qū)域 原文鏈接。
- withRouter：對普通組件進行包裹功炮，將路由相關(guān)對象注入到組件溅潜。只有路由組件上props內(nèi)部包含路由相關(guān)信息及方法。需要使用withRouter將路由對象注入 非路由 組件的props上薪伏。
- Redirect：路由重定向滚澜。
- Switch：確保包含的Route組件只匹配一個。
16毅该、路由傳參 原文鏈接
- 方式一：params（刷新頁面數(shù)據(jù)不會丟失）
路由配置：例：<Route path='/detail/:id' component={Detail}></Route>
路由跳轉(zhuǎn)：例：this.props.history.push('/detail/10')博秫；<Link to='/detail/10'></Link>
注意：js跳轉(zhuǎn)時，需要使用withRouter眶掌。例：export default withRouter(connect(getProps,getDis)(List)) 父組件
路由頁面接收參數(shù)：例：this.props.history.match.params.id
當前路由：例：localhost:3000/detail/10 - 方式二：state（刷新頁面數(shù)據(jù)不會丟失）
路由配置：例：<Route path='detail' component={Detail}></Route>
路由跳轉(zhuǎn)：例：this.props.history.push({pathname:'/detail',state:{id:10}})挡育；<Link to={{pathname:'detail',state:{id:10}}}></Link>
注意：js跳轉(zhuǎn)時，需要使用withRouter朴爬。例：export default withRouter(connect(getProps,getDis)(List)) 父組件
路由頁面接收參數(shù)：例：this.props.location.state.id
當前路由：例：localhost:3000/detail - 方式三：query（刷新頁面數(shù)據(jù)丟失）
路由配置：例：<Route path='detail' component={Detail}></Route>
路由跳轉(zhuǎn)：例：this.props.history.push({pathname:'/detail',query:{id:10}})即寒；<Link to={{pathname:'detail',query:{id:10}}}></Link>
注意：js跳轉(zhuǎn)時，需要使用withRouter召噩。例：export default withRouter(connect(getProps,getDis)(List)) 父組件
路由頁面接收參數(shù)：例：this.props.location.query.id
當前路由：例：localhost:3000/detail
17母赵、生命周期 原文鏈接
聲明周期里的this指向組件實例。
- 1具滴、getDefaultProps
這個方法是用來設置組件默認的props凹嘲，組件生命周期只會調(diào)用一次。只適用于React.createClass直接創(chuàng)建組件构韵。 - 2周蹭、getInitialState
設置state初始值趋艘，可以訪問到this.props。只適用于React.createClass凶朗。 - 3瓷胧、componentWillMount
這個方法在組件首次渲染之前調(diào)用，這個是在render方法調(diào)用之前可以修改state的最后一次機會棚愤。這個很少用到搓萧。 - 4、render
JSX通過這里宛畦，可以解析成對應的虛擬DOM瘸洛，渲染成最終結(jié)果。 - 5刃永、componentDidMount
這個方法在首次真實的DOM渲染后調(diào)用（僅此一次）货矮。當我們需要訪問真實的DOM時，在這個方法中訪問斯够。 - 6囚玫、componentWillReceiveProps
每當我們通過父組件更新子組件props時（這個也是唯一途徑），這個方法被調(diào)用读规。 - 7抓督、shouldComponentUpdate
字面意思，是否應該更新組件束亏，默認返回 true铃在。當返回 false 時，后期函數(shù)就不會調(diào)用碍遍，組件不會在次渲染定铜。 - 8、componentWillUpdate
組件將會更新怕敬，props和state改變后必調(diào)用揣炕。 - 9、render
跟實例化的render一樣东跪。 - 10畸陡、componentDidUpdate
這個方法在更新真實的DOM成功后調(diào)用，當我們需要訪問真實的DOM時虽填，這個方法也經(jīng)常用到丁恭。 - 11、componentWillUnmount
每當組件調(diào)用斋日，這個組件就必須從DOM中銷毀牲览，此時該方法就會被調(diào)用。當我們在組件中使用了setInterval恶守，那我們就需要在這個方法中調(diào)用clearInterval竭恬。如果手動使用了addEventListener綁定事件跛蛋，也需要解綁事件。
18痊硕、key的作用
- Keys 是 React 用于追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識押框。
19岔绸、狀態(tài)（state）和屬性（props）之間有何不同
- state：是一種數(shù)據(jù)結(jié)構(gòu)，用于組件掛載時所需數(shù)據(jù)的默認值橡伞。state可能會隨著時間的推移而發(fā)生突變盒揉，但多數(shù)時候，是作為用于事件行為的結(jié)果兑徘。
- props(properties)：是組件的配置刚盈。props由父組件傳遞給子組件，并且就子組件而言挂脑，props是不可變得藕漱。組件不能改變自身的props，但是可以把其子組件的props放在一起（統(tǒng)一管理）崭闲。props也不僅僅是數(shù)據(jù)肋联，回調(diào)函數(shù)也可以通過props傳遞。
20刁俭、虛擬dom
- 本質(zhì)：用js對象橄仍，來模擬DOM元素的嵌套關(guān)系；
- 目的：就是為了實現(xiàn)頁面元素的高效更新牍戚。
21侮繁、為什么說虛擬dom會提高性能？
- 說Virtual(虛擬) DOM高效的一個理由就是它不會直接操作原生的DOM節(jié)點如孝，因為這個很消耗性能宪哩。當組件狀態(tài)變化時它會通過某些diff算法去計算出本次數(shù)據(jù)更新真實的視圖變化，然后只改變“需要改變”的DOM節(jié)點暑竟。
- 虛擬 dom 相當于在 js 和真實 dom 中間加了一個緩存斋射，利用 dom diff 算法避免了沒有必要的 dom 操作，從而提高性能但荤。
22罗岖、diff算法
- tree diff：新舊兩棵DOM樹，逐層對比的過程腹躁，就是Tree Diff桑包；當整棵DOM逐層對比完畢，則所有需要按需更新的元素纺非，必然能夠找到哑了。
- component diff：在進行Tree Diff的時候赘方，每一層中，組件級別的對比弱左，叫做Component Diff窄陡。
如果對比前后，組件類型相同拆火，則暫時認為組件不需要被更新跳夭。
如果對比前后，組件類型不同们镜，則需要移除舊組件币叹。創(chuàng)建新組建，并追加到頁面上模狭。 - element diff：在進行組件對比的時候颈抚，如果兩個組件類型相同，則需要進行元素級別的對比嚼鹉，這叫做Element Diff贩汉。
23、dva：js和jsx的區(qū)別
- JS：即JavaScript反砌，一種直譯式腳本語言雾鬼。
- JSX：即JavaScript XML——一種在React組建內(nèi)部構(gòu)建標簽的類XML語法。(增強React程序組件的可讀性)宴树。
- 區(qū)別：瀏覽器只能識別普通的js策菜，普通的css，并不能識別scss酒贬，或者jsx（scss是css的拓展又憨，jsx可以看做是js的拓展），所以webpack的作用是把scss轉(zhuǎn)換為css锭吨，把jsx轉(zhuǎn)換為瀏覽器可以識別的js蠢莺，然后瀏覽器才能正常使用。
JSX語法零如，像是在Javascript代碼里直接寫XML的語法躏将，實質(zhì)上這只是一個語法糖，每一個XML標簽都會被JSX轉(zhuǎn)換工具轉(zhuǎn)換成純Javascript代碼考蕾，React 官方推薦使用JSX祸憋， 當然你想直接使用純Javascript代碼寫也是可以的，只是使用JSX肖卧，組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加清晰蚯窥。
24、dva：路由跳轉(zhuǎn)
- 1、'dva/router'下引入Link拦赠；
布局中使用<Link to='/'>去首頁</Link> - 2巍沙、this.props.history.push('/') // 注：需要將父級頁面的history傳遞過來。
- 3荷鼠、組件文件引入：import {withRouter} from 'dva/router'
export default withRouter(ListBtn) - 4句携、組件文件引入：import {routerRedux} from 'dva/router'
this.props.dispatch(routerRedux.push('/'))
25、刷新攔截（參考文件）
componentWillMount () {
// 攔截判斷是否離開當前頁面
window.addEventListener('beforeunload', this.beforeunload);
}
componentWillUnmount () {
// 銷毀攔截判斷是否離開當前頁面
window.removeEventListener('beforeunload', this.beforeunload);
}
beforeunload (e) {
let confirmationMessage = '你確定離開此頁面嗎?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
