認識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)