1. npx creact-react-app 出來(lái)沒(méi)有webpack文件
用npm run eject命令赃蛛。
react-scripts 是 create-react-app 的一個(gè)核心包，一些腳本和工具的默認(rèn)配置都集成在里面，而命令執(zhí)行后會(huì)將封裝在 create-react-app 中的配置全部反編譯到當(dāng)前項(xiàng)目劫哼，這樣就能完全取得 webpack 文件的控制權(quán)。但該操作時(shí)不可逆的粪般，所以如果想回去察纯，只有重新npm creat-xxxx。
執(zhí)行npm run eject命令可能會(huì)出現(xiàn)一個(gè)報(bào)錯(cuò)：如下
解決方法:
git init
git add .
git commit -m 'init'
2.路由跳轉(zhuǎn)傳參方式
在跳轉(zhuǎn)路由的鏈接中通過(guò)‘褐桌？’傳遞參數(shù)
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
</Switch>
//link方式跳轉(zhuǎn)
<Link to="/about?msg='url參數(shù)'">去關(guān)于我的頁(yè)面 url傳遞參數(shù)</Link>
//js方式跳轉(zhuǎn)
this.props.history.push({ pathname:"/about?msg='url參數(shù)'"});
//about中獲取參數(shù)
console.log(this.props.location)
//{pathname: "/about", search: "?msg='url參數(shù)'", hash: "", state: undefined}
優(yōu)缺點(diǎn)：參數(shù)比較靈活衰抑，參數(shù)直接在url中暴露，刷新路由頁(yè)面時(shí)傳遞參數(shù)依然可以正常訪問(wèn)荧嵌。缺點(diǎn)是還需要js通過(guò)search中解析類(lèi)似getParameter(msg)方式獲取真實(shí)值
通過(guò):id方式
<Route exact path="/about/:msg" component={About} />
//link方式
<Link to="/about/url參數(shù)">去關(guān)于我的頁(yè)面 路由配置傳遞參數(shù)</Link>
//js方式跳轉(zhuǎn)
this.props.history.push({ pathname:"/about/'url參數(shù)'"});
//about中獲取參數(shù)
console.log(this.props.match.params.msg)
//url參數(shù)
優(yōu)缺點(diǎn)：參數(shù)比較靈活呛踊，參數(shù)直接在url中暴露,刷新路由頁(yè)面時(shí)傳遞參數(shù)依然可以正常訪問(wèn)砾淌。但每增加一個(gè)參數(shù)需要在Route中注冊(cè)一個(gè)，而且順序需要一致谭网。
其他query(自定義屬性)和state
// query 傳遞參數(shù)
this.props.history.push({
pathname: '/about',
query: {
msg: 'msg by query'
}
});
// state 傳遞參數(shù)
this.props.history.push({
pathname: '/about',
state: {
msg: 'msg by state'
}
});
// query 接受參數(shù)
console.log(this.props.location.query.msg)//msg by query
// state 接受參數(shù)
console.log(this.props.location.state.msg)//msg by state
優(yōu)缺點(diǎn)：參數(shù)靈活汪厨，不用給Route額外的配置，參數(shù)是加密的蜻底，不暴露在url上骄崩。
3. React-router V4 中的BrowserRouter和HashRouter
HashRouter
它使用URL的哈希部分（即window.location.hash）來(lái)保持頁(yè)面的UI與URL同步。
重要說(shuō)明：哈希歷史記錄不支持location.key或location.state薄辅。
BrowserRouter
使用HTML5歷史API（ pushState要拂，replaceState和popstate事件），讓頁(yè)面的UI同步與URL
可以查看官網(wǎng)api了解更多站楚。
區(qū)別：1.URL的不同
HashRouter使用URL（即window.location.hash）的哈希部分來(lái)保持UI與URL同步的脱惰。哈希歷史記錄不支持location.key和location.state 詳情查看history 用來(lái)支持舊版瀏覽器，官方不建議使用窿春。簡(jiǎn)單來(lái)說(shuō)拉一，就是不需要服務(wù)器端渲染，靠瀏覽器的# 來(lái)區(qū)分path旧乞。
BrowserRouter使用HTML5 history API蔚润，保證UI界面和URL保存同步。要求服務(wù)器端對(duì)不同URL返回不同的HTML尺栖。
例如嫡纠，有兩個(gè)頁(yè)面Home和About，如果用HashRouter延赌，兩個(gè)URL就是這樣除盏，因?yàn)?后面的部分不會(huì)發(fā)給服務(wù)器，所以服務(wù)器只需要應(yīng)對(duì) / 路徑的請(qǐng)求就好
https://xxxxxx.com/#/home
https://xxxx.com/#/about
如果用BrowserRouter挫以，兩個(gè)URL就是這樣者蠕，服務(wù)器不得不對(duì) /home 和 /about 做不同請(qǐng)求
https://xxxxxx.com/home
https://xxxx.com/about
2.路由跳轉(zhuǎn)傳遞參數(shù)和刷新頁(yè)面數(shù)據(jù)丟失
當(dāng)點(diǎn)擊觸發(fā)js跳轉(zhuǎn)到about，然后回退到上一頁(yè)掐松，再點(diǎn)擊下一頁(yè)到about頁(yè)面踱侣。參數(shù)通過(guò)state傳遞
//about組件
class About extends Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props.location);
return (
<div className="demo">
我是一個(gè)路由跳轉(zhuǎn)后的子頁(yè)面
<br />
<div>
參數(shù)：{JSON.stringify(this.props.location)}
</div>
<Link to="/">回首頁(yè)</Link>
</div>
);
}
}
//通過(guò)js跳轉(zhuǎn)
this.props.history.push({
pathname: '/about',
state: {
msg: 'msg by state'
}
});
//HashRouter結(jié)果
//第一次進(jìn)入頁(yè)面打印結(jié)果
{"pathname":"/about","state":{"msg":"msg by state"},"search":"","hash":""}
//刷新頁(yè)面或者后退再前進(jìn)
{"pathname":"/about","search":"","hash":""}
//BowserRouter結(jié)果
//第一次進(jìn)入頁(yè)面打印結(jié)果
{"pathname":"/about","state":{"msg":"msg by state"},"search":"","hash":"","key":"1m6gz4"}
//刷新頁(yè)面或者后退再前進(jìn)
{"pathname":"/about","state":{"msg":"msg by state"},"search":"","hash":"","key":"1m6gz4"}
當(dāng)我們通過(guò)state傳遞參數(shù)的時(shí)候，因?yàn)閔ashRouter沒(méi)有使用html5中history的api大磺，無(wú)法從歷史記錄中獲取到key和state值泻仙，所以當(dāng)刷新路由后state值會(huì)丟失導(dǎo)致頁(yè)面顯示異常。
總結(jié)：實(shí)現(xiàn)路由頁(yè)面頁(yè)面刷新數(shù)據(jù)不丟失的方案
BorwserRouter有三種方式（url傳值量没，路由參數(shù)傳值玉转，以及state）
HashRouter有兩種方式（url傳值，路由參數(shù)傳值）
本地緩存或者狀態(tài)管理方案
4. 生命周期
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor (props){
super(props)
this.state = {
data: 'old state'
}
console.log('c初始化數(shù)據(jù)constructor')
}
//組件將要加載執(zhí)行
componentWillMount () {
console.log('componentWillMount')
}
//組件掛載（加載）完成
componentDidMount () {
console.log('componentDidMount')
}
//將要接受父組件傳來(lái)的props
componentWillReceiveProps () {
console.log('componentWillReceiveProps')
}
//子組件是否更新
shouldComponentUpdate () {
console.log('shouldComponentUpdate')
return true
}
//組件將要更新
componentWillUpdate () {
console.log('componentWillUpdate')
}
//組件更新完成
componentDidUpdate () {
console.log('componentDidUpdate')
}
//組件即將銷(xiāo)毀
componentWillUnmount () {
console.log('componentWillUnmount')
}
//處理點(diǎn)擊事件
handelClick(){
console.log('更新數(shù)據(jù)')
this.setState({
data:'new state'
})
}
render() {
console.log('render')
return (
<div>
<div>app</div>
<button onClick={()=>{this.handelClick()}}>更新組件</button>
</div>
);
}
}
export default App;
5.@withRouter
withRouter可以包裝任何自定義組件殴蹄，將react-router 的 history,location,match 三個(gè)對(duì)象傳入究抓。
使用@需要install 兩個(gè)依賴(lài),并在package.json的babel中配置
6.react定義組件的三種方式和區(qū)別
- 函數(shù)式定義的無(wú)狀態(tài)組件
- es5原生方式React.createClass定義的組件
- es6形式的extends React.Component定義的組件
參考https://www.cnblogs.com/wonyun/p/5930333.html
補(bǔ)充：無(wú)狀態(tài)函數(shù)式組件寫(xiě)法
const HelloWorld = (props) => (
<h1>{props.text}</h1>
)
7. react狀態(tài)管理Mobx vs Redux
參考：https://blog.csdn.net/vhwfr2u02q/article/details/79395072
