React搭建个人博客（一）项目简介与React前端踩坑
一.简介项目最开始目的是为了熟悉React用法，之后加入的东西变多，这里分成三部分，至少三篇博客拆开来讲。前端部分ReactReact-Router4.0ReduxAntDesignwebpack4后端部分consul+consul-template+nginx+docker搭建微服务cdn上传静态资源thinkJs部署部分daocloud自动...
一.简介
项目最开始目的是为了熟悉React用法，之后加入的东西变多，这里分成三部分，三篇博客拆开来讲。
前端部分
- React
- React-Router4.0
- Redux
- AntDesign
- webpack4
后端部分
- consul+consul-template+nginx+docker搭建微服务
- cdn上传静态资源
- thinkJs
运维部分
- daocloud自动化部署
- Prometheus+Grafana监控系统
博客网站分为两个部分，前台博客展示页面，后台管理页面。先看下效果：
前台页面：
也可以看我线上正在用的博客前台，点这里
后台页面：
这一篇只讲前端部分
-
功能描述
- 文章列表展示
- 登录管理
- 文章详情页展示
- 后台文章管理
- 后台标签管理
- MarkDown发文
-
项目结构
前后台页面项目结构类似，都分为前端项目和后端项目两个部分。前端项目开发环境使用webpack的devserver，单独启动一个服务，访问后端服务的接口。生产环境直接打包到后端项目指定目录，线上只启动后端服务。
前台页面：前端项目代码地址 在这里。后端项目代码地址在这里。
后台页面：前端项目代码地址 在这里。后端项目代码地址在这里。
二.React踩坑记录
这里讲一下项目中React踩坑和一些值得留意的问题。
1.启动报错如下：
下图是一开始blog-react项目一个报错
因为项目里我使用webpack来运行项目，以及添加相关配置，而不是刚建好项目时的react命令，所以一开始启动的时候会报 Module build failed: SyntaxError: Unexpected token 错误。说明ReactDom.render这句话无法解析。
解决方法,添加babel的react-app预设,我直接加到了package.json里。
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --mode development --inline --progress --config build/webpack.config.dev.js",
"build": "cross-env NODE_ENV=production webpack --env=test --progress --config ./build/webpack.config.prod.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"babel": {
"presets": [
"react-app"
]
},
2.React 组件方法绑定this问题
React跟Vue不一样的一点是，组件里定义的方法，如果直接调用会报错。
比如：
class App extends React.Component{
state={
name:'sx
}
handleClick(){
console.log(this.state.name)
}
render()
{
return <Button onClick={this.handleClick}>click</Button>
}
}
这样会直接报错，必须要给方法绑定this。
解决方法：
- bind绑定this
export default class LeftImg extends React.Component {
handleClick(){}
render() {
return <Button onClick={this.handleClick.bind(this)}></Button>
}
}
- 使用箭头函数继承外部this
export default class LeftImg extends React.Component {
state={
name:'sx'
}
handleClick = () => {
console.log(this.state.name)
};
render() {
const { src } = this.props;
return (
<div className="left-img-container">
<img src={src} onClick={this.handleClick} />
</div>
);
}
}
也可以：
<div className="tip left" onClick={() => this.handleControlPage("left")}>
{left}
</div>
- 构造函数内部绑定
在构造函数里绑定，这种相对最好，因为只绑定一次。
export default class JoinUs extends React.Component {
constructor(props) {
super(props);
this.handleScroll = this.handleScroll.bind(this);
}
}
注意，不要这么写
handleClick(){this.setState({name:'xx'})}
<Button onClick={this.handleClick('edit')}></Button>
React这里跟vue不同，这么写初始化就会执行这个方法，而不是触发事件才会调用。会导致报错：
3.setState问题
setState方法，当你想赋的新state值是通过旧state计算得到时，要使用
this.setState((preState,preProps)=>{return {name:preState.name+'ox'}})
preState是改变前的state,preProps是改变前的props。
注意：
1.setState第二个参数是改变state的回调，因为setState是异步方法，改变后的操作需要在回调里定义。用的不 多但是面试可能会问。
2.setState不能再render调用。
4.受控组件问题
项目中使用antDesign作为UI库，当使用Upload组件上传时，发生onChange只执行一次的现象，代码如下：
handleChange = info => {
console.log("info", info);
if (info.file.status === "uploading") {
return;
}
if (info.file.status === "done") {
this.setState({
fileList: [...info.fileList]
});
this.setState({
uploadImg: { ...info.file.response.data, uid: info.file.uid }
});
}
};
<Upload
name="image"
listType="picture-card"
className="avatar-uploader"
fileList={this.state.fileList}
onChange={this.handleChange}
>
{this.state.fileList.length >= maxImgCount
? null
: uploadButton}
</Upload>
通过查找，发现Upload是受控组件，也就是用户的输入需要再动态改变组件的值。类似与vue里不使用v-model实现的双向绑定。这种组件值与用户onChange的同步，就是受控组件的特点。
这里解决方法就是handleChange里的所有分支里，都需要改变fileList,如下：
handleChange = info => {
this.setState({
fileList: [...info.fileList]
});
if (info.file.status === "uploading") {
return;
}
if (info.file.status === "done") {
this.setState({
uploadImg: { ...info.file.response.data, uid: info.file.uid }
});
}
};
5.React 父级组件传入props变化，子级组件更新state问题
当子组件的state初始值取决于父组件传入的props，如这里的fileList
class UploadImg extends React.Component {
state = {
visibleUpload: false,
imageUrl: "",
fileList: this.props.defaultFileList,
previewImage: "",
previewVisible: false,
uploadImg: {},
delModalVisible: false,
deleteTitle: "",
deletefile: {}
};
}
如果props.defaultFileList变化，子组件的state不会重新计算，推荐的解决方法有以下两种
- 利用key变化，使子组件重新实例化
<UploadImg
visible={this.state.visibleUpload}
onConcel={() => {
this.setState({ visibleUpload: false });
}}
onOk={this.confirmUpload}
key={this.props.thumb}
maxImgCount={1}
defaultFileList={this.props.thumb}
/>
2. 子组件使用componentWillReceiveProps钩子函数
父组件props变化，会触发子组件钩子函数componentWillReceiveProps，它参数是更新后的props，可以根据新的props改变子组件自己的state
componentWillReceiveProps(nextProps) {
const { data } = this.state
const newdata = nextProps.data.toString()
if (data.toString() !== newdata) {
this.setState({
data: nextProps.data,
})
}
}
注意：react16不推荐componentWillReceiveProps，可以查看官网的替代方法。
6.高阶组件的装饰器写法不支持问题
高阶组件是React非常实用的一个功能，装饰器方法写起来也很方便，但是直接写无法解析。
@withRouter
class Header extends React.Component {
}
解决方式：babel转码
- 执行 npm install @babel/plugin-proposal-decorators
- 配置babel plugin
babel解析插件的定义，这次我写在了webpackage.config.base.js里。下面是关键部分代码
{
test: /\.(js|mjs|jsx)$/,
include: resolve("src"),
loader: require.resolve("babel-loader"),
options: {
plugins: [
[
"@babel/plugin-proposal-decorators",
{
legacy: true
}
]
],
cacheDirectory: true,
cacheCompression: true,
compact: true
}
}
7.React Router4注意点
- 使用Switch组件匹配第一个Route
- v4不提供browerHistory，想要得到history
- 使用context对象获取， this.context.router.history
- 使用withRouter
- 子级创建history
- v4之前嵌套的路由可以放在一个router中如下，但是在4.0以后这么做会报错，需要单独放置在嵌套的跟component中处理路由
// 4.0之前
<Route component={App}>
<Route path="groups" components={Groups} />
<Route path="users" components={Users}>
<Route path="users/:userId" component={Profile} />
</Route>
</Route>
//v4.0
<Route component={App}>
<Route path="groups" components={Groups} />
<Route path="users" components={Users}>
</Route>
</Route>
const Users = ({ match }) => (
<div>
<h2>Topics</h2>
<Route path={`${match.url}/:userId`} component={Profile}/>
</div>
)
8.React防止服务泄漏
开发过程中，有时会遇到这种报错
Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method”
大概意思就是组件已经销毁了，不能再设置它的tate了，防止内存泄漏。出现的场景是，用AsyncComponent实现路由懒加载时（后面会讲），当路由跳转后，如果跳转前存在异步方法，回调函数包含设置跳转前组件的state。这时如果路由已经跳转，旧的组件已经销毁，再设置state就会报上面的错。
解决方法：
利用componentWillUnmount钩子和setState改造，使得组件销毁后，阻止执行setState。
function inject_unount (target){
// 改装componentWillUnmount，销毁的时候记录一下
let next = target.prototype.componentWillUnmount
target.prototype.componentWillUnmount = function () {
if (next) next.call(this, ...arguments);
this.unmount = true
}
// 对setState的改装，setState查看目前是否已经销毁
let setState = target.prototype.setState
target.prototype.setState = function () {
if ( this.unmount ) return ;
setState.call(this, ...arguments)
}
}
代码比较好理解，在组件销毁之前，设置this.unmount为true。修改组件原型的setState方法，判断如果this.unmount为true，就不执行操作。
应用inject_unmount时，可以使用普通的传参，也能用修饰器
//普通用法
export default inject_unmount(BaseComponent)
//修饰器
export default
@inject_unount
class BaseComponent extends Component {
.....
}
三.项目前端记录点
手写实现路由守卫
vue-router中存在路由守卫，当实现登录过滤及权限判断时会特别方便。react-router里没有这个功能，于是手写一个组件实现简单的守卫功能。
后台项目中，有登录功能，这里使用路由守卫判断用户是否登录，没登录直接跳回登录页。
import React from "react";
import { Route, Redirect } from "react-router-dom";
import { getToken } from "@/utils/auth";
import { withRouter } from "react-router-dom";
import history from "@/utils/history";
class RouterGurad extends React.Component {
render() {
const { location, config } = this.props;
const { pathname } = location;
const token = getToken();
const targetRouterConfig = config.find(v => v.path === pathname);
console.log("token", token);
if (token) {
if (pathname === "/login") {
return <Redirect to="/" />;
} else {
return <div />;
}
} else {
if (pathname !== "/login") {
history.push("/login");
return <div />;
} else {
return <div />;
}
}
}
}
export default withRouter(RouterGurad);
用户登录后，服务端返回的token会返回前端，并存储在cookie里，这里判断了token是否存在，不存在不让用户访问login以外的页面。
App.jsx中加入这个组件
<LocaleProvider locale={zhCN}>
<Router>
<div>
<RouterGurad config={[]} />
<Switch>
<Route
path="/login"
component={Login}
key="/login"
/>
<Route path="/" component={SelftLayout} key="/" />
<Route path="*" component={notFound} key="*" />
</Switch>
</div>
</Router>
</LocaleProvider>
路由的异步组件加载
在vue里，想要实现路由懒加载组件，只要在router的component这么定义就可以
{
path: "welcome",
name: "welcome",
hidden: true,
component: () => import("@/views/dashboard/index")
}
这样会在路由匹配到path时，再执行component指定的function,返回组件，实现了懒加载。
React里，如果你直接在route组件的component属性里这么写，是不行的，因为Route里不能传入一个函数作为component。这时需要手写一个异步组件，实现渲染时才会加载所需的组件。
//asyncComponent.js
import React from "react";
import { inject_unmount } from "@/utils/unmount";
const AsyncComponent = loadComponent => {
class AsyncComponent extends React.Component {
state = {
Component: null
};
componentWillMount() {
if (this.hasLoadedComponent()) {
return;
}
loadComponent()
.then(module => module.default || module)
.then(Component => {
if (this.state) {
this.setState({ Component });
}
})
.catch(err => {
console.error(
`Cannot load component in <AsyncComponent />`
);
throw err;
});
}
hasLoadedComponent() {
return this.state.Component !== null;
}
render() {
const { Component } = this.state;
return Component ? <Component {...this.props} /> : null;
}
}
return inject_unmount(AsyncComponent);
};
export default AsyncComponent;
这个是在网上找的，大概意思是，AsyncComponent传入一个组件作为参数，当不加载AsyncComponent时，它不会渲染（渲染null），加载后，渲染为传入组件。
在Route组件里，component的写法就变成这样。
const Login = AsyncComponent(() => import("@/components/login/index"));
class App extends React.Component {
render() {
return (
<Route path="/login" component={Login} key="/login" />
)
}
项目中Router结构
这里以后台项目 blog-backend-react 为例，讲一下整个项目路由的结构。
路由采用的是hash模式，后台项目首先是在App.jsx定义三个路由，对应着登录页面，登录后的管理页面，以及404页面。
render() {
return (
<LocaleProvider locale={zhCN}>
<Router>
<div>
<RouterGurad config={[]} />
<Switch>
<Route
path="/login"
component={Login}
key="/login"
/>
<Route path="/" component={SelftLayout} key="/" />
<Route path="*" component={notFound} key="*" />
</Switch>
</div>
</Router>
</LocaleProvider>
);
}
当登录后，进入到SelfLayout组件后，又会有根据管理页面的路由，比如文章管理，标签管理等。这些路由配置我在前端写在了routerConfig.js里，当然正常来说是该后端获取的。
React-Router其实主要就是两部分，一部分是作为跳转的Link组件，一部分是为匹配路由的组件占位显示的Route组件。项目中左侧SideBar导航树是要根据routeConfig生成的，而且要包含Link，满足点击时路由跳转。Route组件编写需要将routeConfig里有层级的配置扁平化之后，在循环出来，因为Route在react-router4里不支持嵌套了。这里代码比较多，想看可以直接在github里看下吧。
Redux的使用
大致讲一下项目中Redux的结构和使用方法。
与Redux有关的主要分为三部分
1.reducer
先看下reducer的写法：
const initState = {
token: "",
name: ""
};
const articleReducer = (state = initState, action) => {
const type = action.type;
switch (type) {
case "SET_TOKEN":
return Object.assign({}, state, { token: action.token });
case "SET_NAME":
return Object.assign({}, state, { token: action.name });
default:
return state;
}
};
这里分为两部分，一个是state，作为一个全局变量的对象存储数据，一个是reducer方法，根据传入的action来改变state的值。这里跟vuex中的state和mutation有点像。项目中因为要分开不同的reducer，所以把各个业务的reducer分成一个js最后再用combineReducers合并。
import { combineReducers } from "redux";
import home from "./system/home";
import article from "./system/article";
import tag from "./system/tag";
export const rootReducer = asyncReducers => {
return combineReducers({
home,
article,
tag
});
};
export default rootReducer;
2.action
action的主要作用是放一些异步改变state的方法(当然也可以放同步方法，这里主要讲下异步方法)，主要用作请求获取数据。
const settoken = data => {
return { type: "SET_TOKEN", token: data };
};
const setName = data => {
return { type: "SET_NAME", name: data };
};
export function login(params) {
return dispatch => {
return service({
url: "/api/login",
method: "post",
data: params
})
.then(res => {
const data = res;
if (data.token) {
dispatch(settoken(data.token));
dispatch(setName(params.username));
}
})
.catch(err => {
console.error("err", err);
});
};
}
上面代码表示，当通过请求接口取得数据后，通过dispatch参数，调用reducer，根据type和其他属性，改变state。我们先记住，最后调用action的是dispatch对象，例如dispatch(login(params))，具体原因等下再解释。
我们先接着看创建store的方法：
//store/index.js
import rootReducer from "../reducers";
import { createStore, applyMiddleware, compose } from "redux";
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";
const loggerMiddleware = createLogger();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export default function configureStore(preloadedState) {
return createStore(
rootReducer(),
preloadedState,
composeEnhancers(applyMiddleware(thunkMiddleware, loggerMiddleware))
);
}
这里先主要讲一下redux-thunk的thunkMiddleware吧。默认情况下redux只能dispatch一个plain object（简单对象），例如：
dispatch({
type: 'SOME_ACTION_TYPE',
data: 'xxxx'
});
这样就会有个问题，如果我想dispatch一个异步的函数——就像上面讲的login方法——是不可以的，所以异步获取的数据想要改变state就无法实现了。
thunkMiddleware 正好可以解决这个问题，看下createThunkMiddleware源码：
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
容易看出，当dispatch传入参数是函数时，这个函数会接收到dispatch,getState作为参数，异步方法得到结果后，再使用传入的dispatch参数改变state就可以了。
btw ,redux里的applyMiddleware作用是添加中间件，compose用于从左到右组合多个函数，有兴趣的可以查一下相关资料，compose函数解析可以看这里，估计面试爱问这个。
3.组件中应用
//Login.jsx
import { login } from "@/action/system/login";
import { connect } from "react-redux";
const mapStateProps = state => ({
name:state.login.name
});
const mapDispatchProps = dispatch => ({
login: params => {
console.log("this", this);
dispatch(
login({
...params
})
);
}
});
const enhance = connect(
mapStateProps,
mapDispatchProps
);
export default enhance(LoginForm);
在这里，将需要的调action的放在mapDispatchProps里，需要读取的state放在mapStateProps里，再用调用connect。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
connect函数返回一个connect类，里面包含要渲染的wrappedComponent，然后将stateProps,dispatchProps还有ownProps合并起来，一起唱诶wrappedComponent。详细connect分析可以看这里，还有这里。
内部组件，如LoginForm可以通过this.props，得到mapStateProps，mapDispatchProps的对象和方法。
四.TodoList
记录下整个博客项目之后需要完善的东西：
- 增加评论插件
- 增加sentry监控前端异常
- 增加react ssr
- 增加用户与权限管理
五.参考文档
https://segmentfault.com/a/1190000010416732?utm_source=tag-newest
https://www.jianshu.com/p/bc5a924db3a4
https://segmentfault.com/a/1190000012921279
https://www.jianshu.com/p/677433245697
https://segmentfault.com/a/1190000017186299?utm_source=tag-newest
https://segmentfault.com/a/1190000014294604
https://www.yangqq.com/download/div/2018-05-18/853.html
六.总结
本文例举了项目开发中前端遇到的一些问题和值得注意的点，主要侧重讲了一下初学React会遇到的基础问题。接下来会从服务端与部署方面讲下项目中遇到的具体问题，有空就写。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)