認識react， 並簡單與vue對比
阿新 • • 發佈：2018-12-16
應用場景：
- 負責場景下的高效能
- 重用元件庫，元件組合
中文官網：https://reactjs.org.cn/doc/in...
特點：
- 宣告式編碼(不需要關心如何實現，只需要關注在哪裡做什麼)
- 元件化編碼
- 高效的DOM Diff，最小化頁面重繪
- 單向資料流
建立一個新的app：
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
- 使用 Yarn 安裝 React：
yarn init yarn add react react-dom
- 使用npm來安裝 React：
npm init
npm install --save react react-dom
使用antd：
根據這個搭建環境: https://ant.design/docs/react...
react和vue一樣：
- 結合各自的生態庫構成MVC框架
react和vue不一樣：
- vue雙向繫結，react單項繫結
- react每次安裝新包需要重新npm install，否則會報錯：
'react-app-rewired' 不是內部或外部命令，也不是可執行的程式或批處理檔案。
- 生態庫：
vue: Vue + Vue-Router + VueX + Axios + Babel + Webpack
react: React + React-Router + Redux + Axios + Babel + Webpack
react-router:
線上學習react地址：https://reacttraining.com/rea...
注：如果要每個路由都是新的頁面不包含上個頁面，就新增exact
- hashHistory
通過 hash 進行對應。好處是簡單易用，不用多餘設定。
- browserHistory
適用於伺服器端渲染，但需要設定伺服器端避免處理錯誤。注意的是若使用 Webpack 開發用,伺服器需加上 --history-api-fallback
$ webpack-dev-server --inline --content-base . --history-api-fallback
- createMemoryHistory
主要用於伺服器渲染，使用上會建立一個存在記憶體的 history 物件，不會修改瀏覽器的網址位置。
const history = createMemoryHistory(location)