1. npx creact-react-app 出來(lá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ò)：如下

error.png

解決方法:
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中解析類似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沒有使用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')
  }
//組件即將銷毀
  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;

打印.png

5.@withRouter

withRouter可以包裝任何自定義組件，將react-router 的 history,location,match 三個(gè)對(duì)象傳入。
使用@需要install 兩個(gè)依賴,并在package.json的babel中配置

下載依賴與配置.png

6.react定義組件的三種方式和區(qū)別

1. 函數(shù)式定義的無(wú)狀態(tài)組件
2. es5原生方式React.createClass定義的組件
3. es6形式的extends React.Component定義的組件
   參考https://www.cnblogs.com/wonyun/p/5930333.html
   補(bǔ)充：無(wú)狀態(tài)函數(shù)式組件寫法

 const HelloWorld = (props) => (
   <h1>{props.text}</h1>
 )

7. react狀態(tài)管理Mobx vs Redux

參考：https://blog.csdn.net/vhwfr2u02q/article/details/79395072