Aolin Xu nitta-honoka

前言

React 作为 Facebook 出品的一个组件化前端框架，已经迅速深入前端开发的各个领域，同时也使组件化开发成为前端开发模式中的一个新常态。

现负责开发百姓网内部服务于销售团队的 CRM 系统，具有复杂且庞大的业务逻辑。为了提升开发和维护效率，其前端便采用 React 作为视图的主要框架，同时按业务切分为不同组件，使整个应用处于易装配、可追踪、可管控的状态。

接下来我们就聊聊业务开发中如何实践组件化开发，真正提升工作效率。

常用的 HTML 头部标签

详细介绍参见原文：yisibl/blog#1

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->

	function makeActionCreator(type, ...argNames) {
	return function(...args) {
	let action = { type }
	argNames.forEach((arg, index) => {
	action[argNames[index]] = args[index]
	})
	return action
	}
	}

	var EventUtil = {
	addHandler: function (element, type, handler) {
	if (element.addEventListener) {
	element.addEventListener(type, handler, false);
	} else if (element.attachEvent) {
	element.attachEvent("on" + type, handler);
	} else {
	element["on" + type] = handler;
	}
	},

	.clearfix::after {
	display: block;
	height: 0;
	content: ".";
	clear: both;
	visibility: hidden;
	}

	.clearfix {
	zoom: 1;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -o-box;
	display: box;

	/* reset */
	html{
	-webkit-text-size-adjust:none;
	-webkit-user-select:none;
	-webkit-touch-callout: none
	font-family: Helvetica;
	}
	body{font-size:12px;}
	body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;}
	a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;}

	/*!
	* by zhangxinxu(.com) 2010-?
	* https://github.com/zhangxinxu/zxx.lib.css
	* under MIT license
	*/
	/*
	* 2010-07-12 v1.0
	* 2010-07-21 v1.1 添加block元素居中之auto属性，增加鼠标手形样式
	* 2010-09-17 v1.2 添加z-index层级属性
	* 2010-09-29 v1.3 添加break-word属性

	function isHostMethod (obj, property) {
	var t = typeof object[property];
	return t == 'function'
	\|\| (!!(t == 'object' && object[property]))
	\|\| t == 'unknown';
	}

	/双飞翼布局方式/
	.grid {
	overflow: hidden;
	padding-bottom: 5000px;
	margin-bottom: -5000px;
	margin-top: 100px;
	}

	#div-middle-02 {
	float: left;