前端农民工

今天写 React 项目的时候，遇到一个比较奇怪的问题，这个问题应该也是大家在开发中经常会遇到的，问题我简单描述一下，我写了一个列表组件，然后这个列表组件引入了另一个PositionedSnackbar 组件, 这个PositionedSnackbar 组件是用于请求数据成功或者失败时给与用户提示的，起初这个PositionedSnackbar 组件是这样写的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import React from 'react';
import Snackbar from '@material-ui/core/Snackbar';

class PositionedSnackbar extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            open:props.open||false,
            message:props.message||'message',
            vertical:props.vertical||null, // 水平方向：'left', 'center' or 'right'
            horizontal:props.horizontal||null, // 垂直方向：'top' or 'bottom'
        }
    }

    render() {
        const { vertical, horizontal, open, message } =this.state;
        return (
            <div>
                <Snackbar
                    anchorOrigin={{ vertical, horizontal }}
                    open={open}
                    onClose={this.handleClose}
                    ContentProps={{
                            'aria-describedby':'message-id',
                        }}
                    message={<spanid="message-id">{message}</span>}
                />
            </div>
        );
    }
}

export default PositionedSnackbar;

create-react-app是react官方提供的快速搭建react项目的脚手架工具，它的安装和使用都非常方便，在命令行工具执行以下命令即可完成create-react-app的安装：

1

npm install -g create-react-app

然后执行以下命令即可创建一个react项目：

1

create-react-app helloworld

这个项目是我之前利用下班的时间弄的Vue版cNode中文社区，当然，因为我以前的技术栈是React，所以也用React实现了同样的功能，后面学习了angular后，抑制不住自己的好奇心,所以也用angular实现了一遍，后期我会把React和angular版本的分享出来。从三大框架去实现cNode中文社区的过程中，我发现难易程度其实差不多，看完vue/react/angular的官方文档后，就可以动手写代码了，涉及到vuex/vue-router、redux/react-router等的使用的时候，是可以一边查文档一边写代码的，用不同的框架去实现，也能让自己对三大框架各自的设计理念有更直观的感受，由于实现的cNode中文社区功能也还不是很丰富，涉及到的主要知识点也就以下几个，但是对于初学者来说，掌握这些完全够用了：

为了方便管理自己的代码，我在腾讯云搭建了一个gitlab服务器，但今天更新了一下git，突然就打不开了，报如图所示502错误：百度了一下，有说是端口被占用的，也有说是服务器内存不足的，于是把百度到的解决方案都尝试了一下，整个过程内心几乎是崩溃的，最终发现确实是由于内存不足导致的502错误，这样是不是意味着就不能继续使用gitlab管理自己的代码了呢，肯定不是，可以通过给服务器建立swap分区来解决内存不足的问题，首先说明一下我的服务器配置，操作系统：CentOS 6.8 64位，CPU: 1 核，内存：2GB，具体操作过程如下：

为了加深对vuex的理解，今天下午的时候刚好有空，所以就挑了vuex的辅助函数 mapState 的源码简单分析了下，顺便写这篇博客记录下来，在分析源码之前，我们先来回顾一下mapState的用法。对于使用过vuex的朋友来说，应该都知道mapState可以将store中的state映射为vue组件的计算属性，通过使用mapState可以减少代码的重复和冗余：

Vue 有两个比较核心的特性，一个是非侵入式的响应式数据绑定系统，另一个是组件系统。由于这两个功能非常重要，所以在求职面试的时候，面试官也通常会围绕这两部分进行提问，如数据绑定的底层实现，组件之间的通讯等等。接下来，本篇博客将主要探讨一下Vue的数据绑定原理与实现。

前言

今天周末，浏览订阅的公众号的时候，发现了这篇非常具有指导意义的文章。因为自己最近几个月的工作一直都是维护一个老旧的项目，想要重构它需要一定的魄力和资源允许，而且这个项目跟奇舞团技术团队重构的项目具有一定的相似度，所以我把这篇文章转载到自己的博客之下，希望在将来如果要重构项目可以拿它作为参考，本篇博客的结尾有标记文章来源，在此感谢奇舞团技术团队。以下是正文。

作为一个勤奋的程序员，通常都会有一个自己的技术博客，用于记录日常的学习体会或总结，搭建博客的方式也有很多，如果自己没有vps服务器，那么可以在博客园、CSDN、SegmentFault等网站注册账户进行博客的写作，如果有自己的vps服务器，那么可以搭建更加灵活的wordpress、typecho等博客网站。

要实现如下图所示的效果，如果我们使用css3来制作的话，那是轻而易举的事情

ECMAScript6中新增了Promise对象， 所谓Promise对象，即代表着一个还未完成，但将来某时会完成的操作（通常是异步操作）。使用Promise对象，我们就可以避免陷入函数层层嵌套的‘回调金字塔’里去，将异步的操作以同步的的形式展现出来。Promise对象对外提供了一整套完整的接口，方便开发者更好地控制异步操作。