面對日新月異的前端，我表示快學不動了:joy:。 Webpack 老早就已經更新到了 V4.x，前段時間 React 又推出了 hooks API。剛好春節在家里休假，時間比較空閑，還是趕緊把 React 技術棧這塊補上。
網上有很多介紹 hooks 知識點的文章，但都比較零碎，基本只能寫一些小 Demo 。還沒有比較系統的，全新的基于 hooks 進行搭建實際項目的講解。所以這里就從開發實際項目的角度，搭建起單頁面 Web App 項目的基本腳手架，并基于 hooks API 實現一個 react 項目模版。
Hooks最吸引人的地方就是用 函數式組件 代替面向對象的 類組件 。此前的 react 如果涉及到狀態，解決方案通常只能使用 類組件 ，業務邏輯一復雜就容易導致組件臃腫，模塊的解藕也是個問題。而使用基于 hooks 的 函數組件 后，代碼不僅更加簡潔，寫起來更爽，而且模塊復用也方便得多，非?？春盟奈磥怼?/p>
webpack 4 的配置
沒有使用 create-react-app 這個腳手架，而是從頭開始配置開發環境，因為這樣自定義配置某些功能會更方便些。下面這個是通用的配置 webpack.common.js 文件。
const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');const { HotModuleReplacementPlugin } = require('webpack');module.exports = { entry: './src/index.js',//單入口 output: { path: resolve(__dirname, 'dist'), filename: '[name].[hash].js'//輸出文件添加hash }, optimization: { // 代替commonchunk, 代碼分割 runtimeChunk: 'single', splitChunks: { cacheGroups: { vendor: { test: /[///]node_modules[///]/, name: 'vendors', chunks: 'all' } } } }, module: { rules: [ { test: //.jsx?$/, exclude: /node_modules/, use: ['babel-loader'] }, { test: //.css$/, use: ['style-loader', 'css-loader'] }, { test: //.scss$/, use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1, modules: true,//css modules localIdentName: '[name]___[local]___[hash:base64:5]' }, }, 'postcss-loader', 'sass-loader'] }, { /* 當文件體積小于 limit 時，url-loader 把文件轉為 Data URI 的格式內聯到引用的地方 當文件大于 limit 時，url-loader 會調用 file-loader, 把文件儲存到輸出目錄，并把引用的文件路徑改寫成輸出后的路徑 */ test: //.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(/?.+)?$/, use: [{ loader: 'url-loader', options: { limit: 1000 } }] } ] }, plugins: [ new CleanWebpackPlugin(['dist']),//生成新文件時，清空生出目錄 new HtmlWebpackPlugin({ template: './public/index.html',//模版路徑 favicon: './public/favicon.png', minify: { //壓縮 removeAttributeQuotes:true, removeComments: true, collapseWhitespace: true, removeScriptTypeAttributes:true, removeStyleLinkTypeAttributes:true }, }), new HotModuleReplacementPlugin()//HMR ]};接著基于 webpack.common.js 文件，配置出開發環境的 webpack.dev.js 文件，主要就是啟動開發服務器。
const merge = require('webpack-merge');const common = require('./webpack.common.js');module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist', port: 4001, hot: true }});生成模式的 webpack.prod.js 文件，只要定義了 mode:'production' ， webpack 4 打包時就會自動壓縮優化代碼。
const merge = require('webpack-merge');const common = require('./webpack.common.js');module.exports = merge(common, { mode: 'production', devtool: 'source-map'});配置 package.js 中的 scripts
{ "scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js" }}Babel 的配置
babel的 .babelrc 文件， css module 包這里推薦 babel-plugin-react-css-modules 。
react-css-modules既支持全局的css(默認 className 屬性)，同時也支持局部css module( styleName 屬性)，還支持css預編譯器，這里使用的是 scss 。
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime", [ "react-css-modules", { "exclude": "node_modules", "filetypes": { ".scss": { "syntax": "postcss-scss" } }, "generateScopedName": "[name]___[local]___[hash:base64:5]" } ] ]}React 項目
下面是項目基本的目錄樹結構，接著從入口開始一步步細化整個項目。
├ package.json├ src│ ├ component // 組件目錄│ ├ reducer // reducer目錄│ ├ action.js│ ├ constants.js│ ├ context.js│ └ index.js├ public // 靜態文件目錄│ ├ css│ └ index.html├ .babelrc├ webpack.common.js├ webpack.dev.js└ webpack.prod.js
狀態管理組件使用 redux ， react-router 用于構建單頁面的項目，因為使用了 hooks API，所以不再需要 react-redux 連接狀態 state 。
<Context.Provider value={{ state, dispatch }}>基本代替了 react-redux 的 ** `。
// index.jsimport React, { useReducer } from 'react'import { render } from 'react-dom'import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom'import Context from './context.js'import Home from './component/home.js'import List from './component/list.js'import rootReducer from './reducer'import '../public/css/index.css'const Root = () => { const initState = { list: [ { id: 0, txt: 'webpack 4' }, { id: 1, txt: 'react' }, { id: 2, txt: 'redux' }, ] }; // useReducer映射出state，dispatch const [state, dispatch] = useReducer(rootReducer, initState); return <Context.Provider value={{ state, dispatch }}> <Router> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/list" component={List} /> <Route render={() => (<Redirect to="/" />)} /> </Switch> </Router> </Context.Provider>}render( <Root />, document.getElementById('root'))constants.js， action.js 和 reducer.js 與之前的寫法是一致的。
// constants.jsexport const ADD_COMMENT = 'ADD_COMMENT'export const REMOVE_COMMENT = 'REMOVE_COMMENT'// action.jsimport { ADD_COMMENT, REMOVE_COMMENT } from './constants'export function addComment(comment) { return { type: ADD_COMMENT, comment }}export function removeComment(id) { return { type: REMOVE_COMMENT, id }}list.js
import { ADD_COMMENT, REMOVE_COMMENT } from '../constants.js'const list = (state = [], payload) => { switch (payload.type) { case ADD_COMMENT: if (Array.isArray(payload.comment)) { return [...state, ...payload.comment]; } else { return [...state, payload.comment]; } case REMOVE_COMMENT: return state.filter(i => i.id != payload.id); default: return state; }};export default listreducer.js
import { combineReducers } from 'redux'import list from './list.js'const rootReducer = combineReducers({ list, //user});export default rootReducer最大區別的地方就是 component 組件，基于 函數式 ，內部的表達式就像是即插即用的插槽，可以很方便的抽取出通用的組件，然后從外部引用。相比之前的 面向對象 方式，我覺得 函數表達式 更受前端開發者歡迎。
//監控數組中的參數，一旦變化就執行useEffect(() => { updateData(); },[id]);//不傳第二個參數的話，它就等價于每次componentDidMount和componentDidUpdate時執行useEffect(() => { updateData(); });//第二個參數傳空數組，等價于只在componentDidMount和componentWillUnMount時執行， //第一個參數中的返回函數用于執行清理功能useEffect(() => { initData(); reutrn () => console.log('componentWillUnMount cleanup...'); }, []);最后就是實現具體界面和業務邏輯的組件了，下面是其中的List組件
// list.jsimport React, { useRef, useState, useContext } from 'react'import { bindActionCreators } from 'redux'import { Link } from 'react-router-dom'import Context from '../context.js'import * as actions from '../action.js'import Dialog from './dialog.js'import './list.scss'const List = () => { const ctx = useContext(Context);//獲取全局狀態state const { user, list } = ctx.state; const [visible, setVisible] = useState(false); const [rid, setRid] = useState(''); const inputRef = useRef(null); const { removeComment, addComment } = bindActionCreators(actions, ctx.dispatch); const confirmHandle = () => { setVisible(false); removeComment(rid); } const cancelHandle = () => { setVisible(false); } const add = () => { const input = inputRef.current, val = input.value.trim(); if (!val) return; addComment({ id: Math.round(Math.random() * 1000000), txt: val }); input.value = ''; } return <> <div styleName="form"> <h3 styleName="sub-title">This is list page</h3> <div> <p>hello, {user.name} !</p> <p>your email is {user.email} !</p> <p styleName="tip">please add and remove the list item !!</p> </div> <ul> { list.map(l => <li key={l.id}>{l.txt}<i className="icon-minus" setVisible(true); setRid(l.id); }}></i></li>) } </ul> <input ref={inputRef} type="text" /> <button onClick={add} <Link styleName="link" to="/">redirect to home</Link> </div> <Dialog visible={visible} confirm={confirmHandle} cancel={cancelHandle}>remove this item ?</Dialog> </>}export default List;項目代碼
https://github.com/edwardzhong/webpack_react
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
