React搭建个人博客（一）项目简介与React前端踩坑

2019年9月20日 130次阅读来源: 巨大星星星

一.简介

项目最开始目的是为了熟悉React用法，之后加入的东西变多，这里分成三部分，三篇博客拆开来讲。

前端部分

[x] React
[x] React-Router4.0
[x] Redux
[x] AntDesign
[x] webpack4

后端部分

[x] consul+consul-template+nginx+docker搭建微服务
[x] cdn上传静态资源
[x] thinkJs

运维部分

[x] daocloud自动化部署
[x] Prometheus+Grafana监控系统

博客网站分为两个部分，前台博客展示页面，后台管理页面。先看下效果：
前台页面：
《React搭建个人博客（一）项目简介与React前端踩坑》
也可以看我线上正在用的博客前台，点这里
后台页面：

这一篇只讲前端部分

功能描述
- [x] 文章列表展示
- [x] 登录管理
- [x] 文章详情页展示
- [x] 后台文章管理
- [x] 后台标签管理
- [x] MarkDown发文
项目结构

前后台页面项目结构类似，都分为前端项目和后端项目两个部分。前端项目开发环境使用webpack的devserver，单独启动一个服务，访问后端服务的接口。生产环境直接打包到后端项目指定目录，线上只启动后端服务。
前台页面：前端项目代码地址在这里。后端项目代码地址在这里。
后台页面：前端项目代码地址在这里。后端项目代码地址在这里。

二.React踩坑记录

这里讲一下项目中React踩坑和一些值得留意的问题。

1.启动报错如下：

下图是一开始blog-react项目一个报错
《React搭建个人博客（一）项目简介与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不同，这么写初始化就会执行这个方法，而不是触发事件才会调用。会导致报错：
《React搭建个人博客（一）项目简介与React前端踩坑》

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}
 />

子组件使用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,
      })
    }
  }

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/11…
https://www.jianshu.com/p/bc5…
https://segmentfault.com/a/11…
https://www.jianshu.com/p/677…
https://segmentfault.com/a/11…
https://segmentfault.com/a/11…
https://www.yangqq.com/downlo…

六.总结

本文例举了项目开发中前端遇到的一些问题和值得注意的点，主要侧重讲了一下初学React会遇到的基础问题。接下来会从服务端与部署方面讲下项目中遇到的具体问题，有空就写。

    原文作者：巨大星星星
    原文地址: https://segmentfault.com/a/1190000019529019
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。