ReactJS 真的好吗？ - 知乎1250被浏览119138分享邀请回答xufei.github.io/slides/2015/components%20and%20templates.html我的主要内容其实不是用来当做对“React真的好吗”这个话题的回答，而是针对React或者其他框架所能够带给我们的组件化开发方式的一些思考，以及这些组件化开发方式可能会对我们的工程应用造成什么样的影响和改变，组件化是否必然好，在工程实践中有怎样的权衡。我的观点是，大面积的模板是有它的意义的，全组件化体系的工程负担是比较重的，在Web应用领域全面组件化还是一个比较长期的路，而且Web体系当前自身的一些特性，也对全组件化有一些制约。 的答案中，引用了一个链接：，这里面有个回答是我的，但我要说的是
当时的那个回答，这个回答非常好，组件化的实施也做得好，但我们需要认识到，他这个项目有其特殊性，目前存在的绝大部分Web应用并不是这个形态，这世界上大部分东西都不过是普通的东西，对这些东西来说，把各方面门槛提高太高并不一定是好事，正好比我们现在有能加工0.1毫米精度的机床，但在加工大部分产品的时候，只会使用1毫米精度的，因为绝大部分产品并不需要这样的精度，提高不必要的精度可能会导致成本上升，对人员技能的要求也大幅提高。我们看到ReactJS本身的定位还是一个相对大众化的框架，它并不期望自己会成为小众，一切组件化框架都不会期望自己成为小众，那么，为它们推出组件化的工程实施方案的时候，是不是需要存在兼顾高端和低端产品、人群的考虑？所以，我提出，在大部分Web应用中，只适合使用“半组件化”，也就是基础部分组件化，业务上层适当松散的方式，就是基于这些权衡。在移动端，适合全组件化的产品比重会较高，因为方寸之地，组件树一般不会特别复杂，工程代价不会很高，对生产力的提高比较明显。11114 条评论分享收藏感谢收起23131 条评论分享收藏感谢收起查看更多回答React.js 2016 最佳实践_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
React.js 2016 最佳实践
&&React.js 2016 最佳实践
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢2875人阅读
react-js（5）
有两种方式来实现动态切换字体颜色。
第一种方式
&!DOCTYPE html&
charset="UTF-8" /&
src="/assets/react/react-0.14.7/build/react.min.js"&&
src="/assets/react/react-0.14.7/build/react-dom.min.js"&&
src="/assets/react/browser.min.js"&&
id="example"&&
type="text/babel"&
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: "yellow"};
handleClick: function(event) {
this.setState({liked:"blue"});
render: function() {
var text = this.state.
var style = {
color:text
onClick={this.handleClick} style={style}&{/*这里不能直接用如style={color:"yellow"}这种属性赋予方式*/}
点我，点我，点我我就变身。
React.render(
document.getElementById('example')
这种方式只能实现点击一次切换样式。
第二种方式
&!DOCTYPE html&
charset="UTF-8" /&
src="/assets/react/react-0.14.7/build/react.min.js"&&
src="/assets/react/react-0.14.7/build/react-dom.min.js"&&
src="/assets/react/browser.min.js"&&
id="example"&&
type="text/babel"&
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
handleClick: function(event) {
this.setState({liked:!this.state.liked});
render: function() {
var text = this.state.liked?"yellow":"blue";
var style = {
color:text
onClick={this.handleClick} style={style}&
你我。点我切换状态。
React.render(
document.getElementById('example')
两者之间没什么多大的区别，主要是第二种运用了三元运算符，实现了点击循环切换的功能。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：46137次
积分：1342
积分：1342
排名：千里之外
原创：92篇
(6)(12)(78)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'ReactJs设置css样式的方法
作者：Ricky_Huang
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了ReactJs设置css样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧.
React颠覆了html的传统思维,代码基本都写在&script& type="text/babel"&&/script&标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在settings里面的Language & Framework设置Javascript language version为JSX Harmony.否则,编辑器可能会对你的正确语法进行报错.
&script src="../js/react.js"&&/script&
&script src="../js/react-dom.js"&&/script&
&script src="../js/browser.min.js"&&/script&
&script src="../js/jquery-1.7.2.min.js"&&/script&
html文件header标签里面引用上面前三个文件,就可以进行react开发了,但是由于jquery的ajax请求比较方便,所以这里我引用了jquery,当然也可以自己封装一个类似于ajax的方法,或者使用原生http请求与后台交互.
今天主要说说设置react样式的问题:
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&React Js&/title&
&script src="../js/react.js"&&/script&
&script src="../js/react-dom.js"&&/script&
&script src="../js/browser.min.js"&&/script&
&script src="../js/jquery-1.7.2.min.js"&&/script&
&style rel="stylesheet"&
color: #width: 200height: 30border:background-color: #00a0e9;line-height: 30text-align:font-size: 14
font-family: "Microsoft YaHei UI";cursor:
background-color: #f00;overflow:
&div id="msg"&&/div&
&script type="text/babel"&
var colorStyle={
color: '#ffffff',
width: 200,height: 30,border: 'none',backgroundColor: '#00a0e9',textAlign: 'center',fontSize: 14,
fontFamily: "Microsoft YaHei UI",cursor: 'pointer',float:'left',lineHeight:'30px'
var Http=React.createClass({
getInitialState: function () {
videoSrc:"../src/demo1.mp4"
handPost:function () {
var HTTPrequest=new XMLHttpRequest();
HTTPrequest.open("GET","/json/city");
HTTPrequest.send();
HTTPrequest.onreadystatechange =function () {
if(HTTPrequest.readyState==4 && HTTPrequest.status==200){
console.log(JSON.parse(HTTPrequest.responseText));
type:'GET',
url:'/json/city',
dataType:'json',
success: function (data) {
console.log(data)
render:function () {
&div className="redBack"&
&video src={this.state.videoSrc} style={{float:'left',width:300,border:'5px solid #ffffff'}} controls="controls"&&/video&
&div onClick={this.handPost} style={colorStyle}&点击请求城市资源&/div&
ReactDOM.render(
&Http/&,document.getElementById('msg')
如上代码所示,我觉得设置样式有三种方法:
1.如蓝色字体部分所示,直接写行内样式
2.在js代码中定义一个变量,然后在元素标签内部调用变量,如红色字体所示.
3.设置标签的className,如绿色字体部分
下面附上截图:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具ReactJS 傻瓜教程3 years ago$.post('/login', credentials, function( user ) {
// Modify the DOM here
$('header .name').show().text( user.name );
按照我的经验，这些代码要毁掉你的生活甚至你同事的生活。如何对输出调试？谁来更新头部？谁还可以访问头部的 HTML？谁来维护名字的显示隐藏状态？这个 DOM 操作会让你的项目像 GOTO 语句那样糟糕。在 React 中你可以像下面这样做：render: function() {
return &header&
{ this.state.name ? &div&this.state.name&/div& : null }
&/header&;
我们会清楚的分辨出这个组件可能会如何渲染。如果你知道这个语句，就会知道渲染后的输出。你没必要去记录程序的流程。在复杂应用中，特别是团队开发中，显得尤为重要。2. 将 JavaScript 和 HTML 绑定到 JSX 使组件更易懂上面的那种把 HTML 和 JavaScript 混合在一起的写法可能让你很不适应。我们会很自然地拒绝将 JavaScript 放在 DOM 当中（比如 onClick 事件处理函数）即便我们是小小的开发者。但是，请一定要相信我；JSX 组件真的会让你的工作变得很“nice”。按照传统，你会把视图（HTML）从功能（JavaScript）中分离开出来。这会产生一个巨大的 JavaScript 文件，包含了一个“页面”的所有功能需求，并且你必须记录复杂的流程，从 JS 到 HTML 到 JS 到悲痛欲绝。捆绑功能直接标记和打包成一个可移植的，自主控制的“组件”，让你更开心，且减少脏乱的代码。因为 JavaScript 与 HTML 关系密切，揉到一起也正常。3. 你可以在服务端渲染 React如果你正在创建一个门户网站或者应用，并且按照 render-it-all-on-the-client 路线，可能已经出错了。只通过客户端渲染使得
感觉如此慢，相反 （纯服务端渲染）如此快。你可以在，并且你该这么做。Angular 等促使你做一些恶心的事情，比如使用 PhantomJS 来渲染页面，分析请求头中的 user agent ，把这些页面提供给搜索引擎，或者。呃。坏处不要忘了 React 仅仅是个 view 层。1. 下面这些都没有：事件系统（除了原生的 DOM 事件）AJAX 功能数据层Promises应用程序架构实现以上功能的规范单独的 React 在这个世界上真的没什么用。更糟糕的是，就像我们将要看到的，这迫使每个开发者都要重新造轮子。2. 官方文档既不是“容易理解的”，也不是“良好的”。重申一遍，这是为笨蛋写的一篇博客。请看侧边栏中第一部分：有三个独立的、相互矛盾的快速入门指南。我有些不知所措，并且我没有喝多。更下面的侧边栏就像是恶梦一样，很明显一些章节不应该放在那里，像“More About Refs”和“PureRenderMixin”。3. 相比 React 给你提供的好处，React 实在太大。而且对浏览器的支持也很有限更新：我之前写到 React 大小不到 144KB。通过 gzip 压缩传输后在 35KB 左右。这没有包含任何 React 的插件，而你需要使用那些插件才能实现一个真正的应用！也不包含 ES5 shim 的类库，你需要支持 IE8 的话。不包含任何类型的应用类库！React 的大小和 Angular 相当，但 Angular 是一个完整的应用框架。React 显而易见的臃肿，但是你只获得了很少的功能。希望这在将来能得到改善。不要说 Flux也许 React 开发中，最让人反感的还是“Flux”。 远比 React 自身混乱。“Flux”这个名字就很让人费解。Flux 并不是真实存在的。它只是一个概念，而不是个类库。幸运的是，存在一个类库，在某种程度上：“相比于一个框架，Flux 更像是一种模式。”呃。一个最不恰当的名字：React 并没有重塑最近 40 年的 UI 体系的知识，也没有为数据管理带来新的概念。Flux 的概念很简单，view 层触发了一个事件（比如说，用户在文本域中输入了一个姓名），这个事件更新了 model，然后 model 触发了一个事件，view 响应了 model 的事件，使用最新的数据进行渲染。就这样。这一数据流/解耦观察者模式被设计来保证你的资源总存在于内存/模式中。这是一件好事(TM)。Flux 的坏处是每个人都会重新发明轮子。由于没有在事件库，model 层，AJAX 层等达成一致，出现了很多种“Flux”的实现方式，并且它们彼此之间相互混杂。我该用 React 吗？简单回答：是。详尽的回答：很不幸，是的，在大多数场景中。下面是为什么要用 React：对团队开发来说表现的很出色加强了 UI 和 工作流模式 UI 代码的可读和可维护性。组件化的 UI 是 web 开发的趋势，并且你现在应该开始了。下面是为什么在你选择之前需要再考虑一下：一开始 React 会极大地减慢你的开发。理解props、state以及组件通信如何工作并不是很简单，并且文档信息错综复杂。理论上，这将会被克服，你的整个团队都上道之后，开发速度上就会有一个很大的提升。React 不支持 IE8 以下的任何浏览器，以后也绝不会。如果你的应用/站点不需要频繁的动态页面更新，你可能为了很小的功能而编写大量的代码。你会改造很多轮子。React 很年轻，并且因为没有权威的方式来处理事件、组件通信，你必须从零开始创建大量的组件库。你的应用是否有下拉菜单，可调整大小的窗口，或者 lightbox？你同样必须从零开始写这些。就这些了！下一篇文章，我希望它可以帮助像我一样笨的人更好地理解 React。如果这篇文章让你的生活更轻松，可以在
上关注我。原文：96收藏分享举报文章被以下专栏收录关注前端技术，探寻深邃思想，https://qianduan.group推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&关注前端前沿技术，探寻业界深邃思想。https:\u002F\u002Fqianduan.group 欢迎微信\u002F微博搜索『前端外刊评论』，关注我们。欢迎给本专栏投稿，原作译作不限，要求：质量高！如果愿意尝试从事前端技术相关的书籍的编写或翻译工作，请私信外刊君。&,&permission&:&COLUMN_PUBLIC&,&memberId&:3313,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&关注前端技术，探寻深邃思想，https:\u002F\u002Fqianduan.group&,&urlToken&:&FrontendMagazine&,&id&:699,&imagePath&:&bd21f286e6aa5e210b60e2e257ce890b.jpeg&,&slug&:&FrontendMagazine&,&applyReason&:&&,&name&:&前端外刊评论&,&title&:&前端外刊评论&,&url&:&https:\u002F\\u002FFrontendMagazine&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:41236,&avatar&:{&id&:&bd21f286e6aa5e210b60e2e257ce890b&,&template&:&https:\u002F\\u002F{id}_{size}.jpeg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fbd21f286e6aa5e210b60e2e257ce890b_l.jpeg&,&articlesCount&:178},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fac2d71aad0df53e628d230af15ee51e0_r.jpg&,&lastUpdated&:,&imagePath&:&ac2d71aad0df53e628d230af15ee51e0&,&permission&:&ARTICLE_PUBLIC&,&topics&:[769,225,,],&summary&:&在相当长的一段时间内，我很努力地去尝试理解 React 是什么以及它在应用架构上的健壮程度。这篇文章解答了我希望别人为我解答的疑惑。 React 是什么？和 Angular，Ember，Backbone 等等比起来 React 的表现如何？要如何处理数据？要如何连接服务器？JSX 到…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:1808084,&publishedTime&:&T09:15:06+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:139621,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&ReactJS 傻瓜教程&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:699,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fac2d71aad0df53e628d230af15ee51e0_r.jpg&,&author&:{&bio&:&&,&isFollowing&:false,&hash&:&13b5ee0e0b7dc917e688de9&,&uid&:36,&isOrg&:false,&slug&:&fanhc&,&isFollowed&:false,&description&:&&,&name&:&范洪春&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Ffanhc&,&avatar&:{&id&:&v2-ea9c3661f74abd07c0b5ff&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:1808084,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:256912}],&title&:&ReactJS 傻瓜教程&,&author&:&fanhc&,&content&:&\u003Cp\u003E在相当长的一段时间内，我很努力地去尝试理解 React 是什么以及它在应用架构上的健壮程度。这篇文章解答了我希望别人为我解答的疑惑。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003EReact 是什么？\u003C\u002Fh2\u003E\u003Cp\u003E和 Angular，Ember，Backbone 等等比起来 React 的表现如何？要如何处理数据？要如何连接服务器？JSX 到底是什么？“组件”又是如何定义的？\u003C\u002Fp\u003E\u003Cp\u003E停。\u003C\u002Fp\u003E\u003Cp\u003E立刻停下来。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EReact 仅仅是 VIEW 层。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003EReact 通常和其他的 JavaScript 框架同时被提及，但是说“React 对比 Angular”却讲不通，因为它们之间是不可比较的。Angular 是一个完整的框架（包括一个 view 层），React 却并不是。这也是 React 很难于理解的原因，它虽然抽离自一个具备完整框架的生态系统中，但仅仅是一个 view 层。\u003C\u002Fp\u003E\u003Cp\u003EReact 提供了模板语法以及一些函数钩子用于基本的 HTML 渲染。这就是 React 全部的输出——HTML。你把 HTML \u002F JavaScript 合到一起，被称为“组件”，允许把它们自己内部的状态存到内存中（比如在一个选项卡中哪个被选中），不过最后你只是吐出 HTML。\u003C\u002Fp\u003E\u003Cp\u003E很明显，\u003Cstrong\u003E你没办法单单使用 React 来创建一个功能完善的动态应用\u003C\u002Fstrong\u003E。下面我们详细看看。\u003C\u002Fp\u003E\u003Ch2\u003E好处\u003C\u002Fh2\u003E\u003Cp\u003E使用 React 一段时间后，我发现了三个非常重要的特性。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E1. 通过查看一个源文件就可以知道你的组件将会如何渲染。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E这是最大的好处，尽管这和 Angular 模板没什么不同。下面看一个真实的应用实例。\u003C\u002Fp\u003E\u003Cp\u003E假设你需要在用户登录后更新站点头部的用户名。如果没有使用 JavaScript MVC 框架，可能要这么做：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eheader\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&name\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eheader\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epost\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'\u002Flogin'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecredentials\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Euser\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F Modify the DOM here\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'header .name'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eshow\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E().\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Euser\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ename\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E按照我的经验，这些代码要毁掉你的生活甚至你同事的生活。如何对输出调试？谁来更新头部？谁还可以访问头部的 HTML？谁来维护名字的显示隐藏状态？这个 DOM 操作会让你的项目\u003Cstrong\u003E像 GOTO 语句那样糟糕\u003C\u002Fstrong\u003E。\u003C\u002Fp\u003E\u003Cp\u003E在 React 中你可以像下面这样做：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-csharp\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eheader\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Estate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ename\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E?\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Estate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Enull\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eheader\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E我们会清楚的分辨出这个组件可能会如何渲染。如果你知道这个语句，就会知道渲染后的输出。你没必要去记录程序的流程。在复杂应用中，特别是团队开发中，显得尤为重要。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E2. 将 JavaScript 和 HTML 绑定到 JSX 使组件更易懂\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E上面的那种把 HTML 和 JavaScript 混合在一起的写法可能让你很不适应。我们会很自然地拒绝将 JavaScript 放在 DOM 当中（比如 \u003Cstrong\u003EonClick\u003C\u002Fstrong\u003E 事件处理函数）即便我们是小小的开发者。但是，请一定要相信我；JSX 组件真的会让你的工作变得很“nice”。\u003C\u002Fp\u003E\u003Cp\u003E按照传统，你会把视图（HTML）从功能（JavaScript）中分离开出来。这会产生一个巨大的 JavaScript 文件，包含了一个“页面”的所有功能需求，并且你必须记录复杂的流程，从 JS 到 HTML 到 JS 到悲痛欲绝。\u003C\u002Fp\u003E\u003Cp\u003E捆绑功能直接标记和打包成一个可移植的，自主控制的“组件”，让你更开心，且减少脏乱的代码。因为 JavaScript 与 HTML 关系密切，揉到一起也正常。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E3. 你可以在服务端渲染 React\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果你正在创建一个门户网站或者应用，并且按照 render-it-all-on-the-client 路线，可能已经出错了。只通过客户端渲染使得 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ESoundcloud\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 感觉如此慢，相反 \u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EStack Overflow\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E（纯服务端渲染）如此快。你可以在\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fwww.npmjs.org\u002Fpackage\u002Freact-server-example\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E服务端渲染 React\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，并且你该这么做。\u003C\u002Fp\u003E\u003Cp\u003EAngular 等促使你做一些恶心的事情，比如使用 PhantomJS 来渲染页面，分析请求头中的 user agent ，把这些页面提供给搜索引擎，或者\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fprerender.io\u002Fpricing\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E为此买一个服务\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。呃。\u003C\u002Fp\u003E\u003Ch2\u003E坏处\u003C\u002Fh2\u003E\u003Cp\u003E不要忘了 React 仅仅是个\u003Cb\u003E view 层\u003C\u002Fb\u003E。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E1. 下面这些都没有：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E事件系统（除了原生的 DOM 事件）\u003C\u002Fli\u003E\u003Cli\u003EAJAX 功能\u003C\u002Fli\u003E\u003Cli\u003E数据层\u003C\u002Fli\u003E\u003Cli\u003EPromises\u003C\u002Fli\u003E\u003Cli\u003E应用程序架构\u003C\u002Fli\u003E\u003Cli\u003E实现以上功能的规范\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E单独的 React 在这个世界上真的没什么用。更糟糕的是，就像我们将要看到的，这迫使每个开发者都要重新造轮子。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E2. 官方文档既不是“容易理解的”，也不是“良好的”。重申一遍，这是为笨蛋写的一篇博客。请看\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E文档页\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E侧边栏中第一部分：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E有三个独立的、相互矛盾的快速入门指南。我有些不知所措，并且我没有喝多。更下面的侧边栏就像是恶梦一样，很明显一些章节不应该放在那里，像“More About Refs”和“PureRenderMixin”。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E3. 相比 React 给你提供的好处，React 实在太大。而且对浏览器的支持也很有限\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E更新：我之前写到 React 大小不到 144KB。通过 gzip 压缩传输后在 35KB 左右。\u003C\u002Fp\u003E\u003Cp\u003E这没有包含任何 React 的插件，而你需要使用那些插件才能实现一个真正的应用！\u003C\u002Fp\u003E\u003Cp\u003E也不包含 ES5 shim 的类库，你需要支持 IE8 的话。\u003C\u002Fp\u003E\u003Cp\u003E不包含任何类型的应用类库！\u003C\u002Fp\u003E\u003Cp\u003EReact 的大小和 Angular 相当，但 Angular 是一个完整的应用框架。React 显而易见的臃肿，但是你只获得了很少的功能。希望这在将来能得到改善。\u003C\u002Fp\u003E\u003Ch2\u003E不要说 Flux\u003C\u002Fh2\u003E\u003Cp\u003E也许 React 开发中，最让人反感的还是“Flux”。 远比 React 自身混乱。“Flux”这个名字就很让人费解。\u003C\u002Fp\u003E\u003Cp\u003EFlux 并不是真实存在的。它只是一个概念，而不是个类库。幸运的是，存在一个类库，在某种程度上：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E“相比于一个框架，Flux 更像是一种模式。”\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E呃。一个最不恰当的名字：React 并没有重塑最近 40 年的 UI 体系的知识，也没有为数据管理带来新的概念。\u003C\u002Fp\u003E\u003Cp\u003EFlux 的概念很简单，view 层触发了一个事件（比如说，用户在文本域中输入了一个姓名），这个事件更新了 model，然后 model 触发了一个事件，view 响应了 model 的事件，使用最新的数据进行渲染。就这样。\u003C\u002Fp\u003E\u003Cp\u003E这一数据流\u002F解耦观察者模式被设计来保证你的资源总存在于内存\u002F模式中。这是一件好事(TM)。\u003C\u002Fp\u003E\u003Cp\u003EFlux 的坏处是每个人都会重新发明轮子。由于没有在事件库，model 层，AJAX 层等达成一致，出现了很多种“Flux”的实现方式，并且它们彼此之间相互混杂。\u003C\u002Fp\u003E\u003Ch2\u003E我该用 React 吗？\u003C\u002Fh2\u003E\u003Cp\u003E简单回答：\u003Cb\u003E是\u003C\u002Fb\u003E。\u003C\u002Fp\u003E\u003Cp\u003E详尽的回答：很不幸，是的，在大多数场景中。\u003C\u002Fp\u003E\u003Cp\u003E下面是\u003Cb\u003E为什么\u003C\u002Fb\u003E要用 React：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E对团队开发来说表现的很出色\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E加强了 UI 和 工作流模式 UI 代码的可读和可维护性。\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E组件化的 UI 是 web 开发的趋势，并且你现在应该开始了。\u003Cbr\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Cp\u003E下面是为什么在你选择之前\u003Cb\u003E需要再考虑一下\u003C\u002Fb\u003E：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cem\u003E一开始 React 会\u003Cb\u003E极大地减慢\u003C\u002Fb\u003E你的开发。理解props、state以及组件通信如何工作并不是很简单，并且文档信息错综复杂。理论上，这将会被克服，你的整个团队都上道之后，开发速度上就会有一个很大的提升。\u003C\u002Fem\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cem\u003EReact 不支持 IE8 以下的任何浏览器，以后也绝不会。\u003C\u002Fem\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cem\u003E如果你的应用\u002F站点不需要频繁的动态页面更新，你可能为了很小的功能而编写大量的代码。\u003Cbr\u003E\u003C\u002Fem\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cem\u003E你会改造很多轮子。React 很年轻，并且因为没有权威的方式来处理事件、组件通信，你必须从零开始创建大量的组件库。你的应用是否有下拉菜单，可调整大小的窗口，或者 lightbox？你同样必须从零开始写这些。\u003C\u002Fem\u003E\u003Cbr\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Ch2\u003E就这些了！\u003C\u002Fh2\u003E\u003Cp\u003E下一篇文章，\u003Ca href=\&http:\u002F\\u002FFrontendMagazine\u002F\& class=\&internal\&\u003EFlux 傻瓜教程\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E我希望它可以帮助像我一样笨的人更好地理解 React。如果这篇文章让你的生活更轻松，可以在 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fandrewray\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ETwitter\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 上关注我。\u003C\u002Fp\u003E\u003Cp\u003E原文：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fblog.andrewray.me\u002Freactjs-for-stupid-people\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReactJS For Stupid People\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fd04fbac1eae7b3c186a9_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&320\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\\u002Fd04fbac1eae7b3c186a9_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='600'%20height='320'&&\u002Fsvg&\& data-rawwidth=\&600\& data-rawheight=\&320\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&600\& data-original=\&https:\u002F\\u002Fd04fbac1eae7b3c186a9_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fd04fbac1eae7b3c186a9_b.jpg\&\u003E&,&updated&:new Date(&T01:15:06.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:28,&collapsedCount&:0,&likeCount&:96,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fac2d71aad0df53e628d230af15ee51e0_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&JavaScript&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&MVC&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&MVVM&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&AngularJS&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发框架和库&}],&adminClosedComment&:false,&titleImageSize&:{&width&:800,&height&:400},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&FrontendMagazine&,&name&:&前端外刊评论&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:28,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T09:15:06+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&a javaer&,&isFollowing&:false,&hash&:&461ed29fc833a9742aefb9b1a6f06719&,&uid&:44,&isOrg&:false,&slug&:&wu-shuai-67-16&,&isFollowed&:false,&description&:&a boring man&,&name&:&Yif丶Wu&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwu-shuai-67-16&,&avatar&:{&id&:&d0a2ca17c2f6afddab55&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&.&,&isFollowing&:false,&hash&:&2a1dacbacd4&,&uid&:833400,&isOrg&:false,&slug&:&xian-yu-57-66&,&isFollowed&:false,&description&:&前往前端的路上&,&name&:&咸鱼&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fxian-yu-57-66&,&avatar&:{&id&:&fb1865fcf7df1f8dd05993&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&大学狗&,&isFollowing&:false,&hash&:&0b5b170ea0b64e0d5ff7b91a60b17d75&,&uid&:245900,&isOrg&:false,&slug&:&xu-zi-hao-60&,&isFollowed&:false,&description&:&南方去北京上学的大学狗&,&name&:&梓昊君&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fxu-zi-hao-60&,&avatar&:{&id&:&32dcc7bb482a&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&c9a5b420e1367ccb2e1f30&,&uid&:40,&isOrg&:false,&slug&:&dududoll&,&isFollowed&:false,&description&:&&,&name&:&玩具人形&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fdududoll&,&avatar&:{&id&:&504f5ce3a&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&前端开发&,&isFollowing&:false,&hash&:&c09ddefd6dfc0b30&,&uid&:12,&isOrg&:false,&slug&:&fei-xiang-de-xie&,&isFollowed&:false,&description&:&一将功成万骨枯&,&name&:&飞翔的葉&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Ffei-xiang-de-xie&,&avatar&:{&id&:&v2-cf0f4bd8b9c880bc2c84b05dbbe3fe97&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&http:\u002F\\u002Fd04fbac1eae7b3c186a9_200x112.jpg\& data-rawwidth=\&600\& data-rawheight=\&320\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&http:\u002F\\u002Fd04fbac1eae7b3c186a9_r.jpg\&\u003E在相当长的一段时间内，我很努力地去尝试理解 React 是什么以及它在应用架构上的健壮程度。这篇文章解答了我希望别人为我解答的疑惑。 React 是什么？和 Angular，Ember，Backbone 等等比起来 React 的表现如何？要如何处理数据？要如何连接服务器？JSX 到…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002F0f57e77a29f50f91be9e_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&CSS&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&排版&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&印刷&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&中文排版&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&繁体字&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&简繁比较&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&不同凡想，心成伟事。&,&isFollowing&:false,&hash&:&0d9b98af12015c94cff646a6fc0773b5&,&uid&:52,&isOrg&:false,&slug&:&stein.cun&,&isFollowed&:false,&description&:&https:\u002F\u002Fqianduan.group，JavaScript、Node.js、CoffeeScript，欢迎微信搜索「前端外刊评论」关注我们用心打造的公众号，每周推送高质量前端资讯！&,&name&:&寸志&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fstein.cun&,&avatar&:{&id&:&369e5e380&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&FrontendMagazine&,&name&:&前端外刊评论&},&content&:&\u003Cblockquote\u003E译者注：我翻译完成后发现文本已经有了繁体中文版：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fbinb.tw\u002Febookmag\u002F00\u002F00.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E簡單做好中文排版\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，抱歉。\u003C\u002Fblockquote\u003E\u003Cbr\u003E\u003Cblockquote\u003E使得长篇文章更易读的十条法则\u003C\u002Fblockquote\u003E\u003Cp\u003E如果你想把你的业务扩展到亚洲，首先会碰到的是语言壁垒（然后是GFW）。中日韩三国使用不一样的排版规则。\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fwww.w3.org\u002FTR\u002Fjlreq\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ERequirements for Japanese Text Layout\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 是一个不错的参考，不过就是太长，读也读不完。\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fwww.w3.org\u002FTR\u002Fklreq\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ERequirements for Hangul Text Layout and Typography\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 倒还好。我本人还在编写 Requirement for Chinese Text Layout 的草稿。\u003C\u002Fp\u003E\u003Cp\u003E在我完成这个文档之前，先给大家十条法则，帮助你更好地做中文排版。\u003C\u002Fp\u003E\u003Ch2\u003E1. 不一样的标点符号\u003C\u002Fh2\u003E\u003Cp\u003E由于某些原因，台湾和香港的繁体中文阅读者一点都不喜欢阅读简体中文，反过来，大陆的中国人阅读起繁体也很吃力。\u003C\u002Fp\u003E\u003Cp\u003E中文字体非常多，作为一个设计师的你，该如何区分字体是繁体的还是简体的？\u003C\u002Fp\u003E\u003Cp\u003E很简单，输入全角的逗号和句号，如果字符是居中的，那就是繁体中文；如果和日文一样位于左下角的话，那就是简体中文。\u003C\u002Fp\u003E\u003Cp\u003E千万别忘了，所有的符号都要是全角的。\u003Cimg src=\&http:\u002F\\u002F2d744fdcd50ecb5a70713_b.jpg\& data-rawwidth=\&1177\& data-rawheight=\&800\& class=\&origin_image zh-lightbox-thumb\& width=\&1177\& data-original=\&http:\u002F\\u002F2d744fdcd50ecb5a70713_r.jpg\&\u003E\u003C\u002Fp\u003E\u003Ch2\u003E2. 使用正确的字体\u003C\u002Fh2\u003E\u003Cp\u003E一旦掌握了如何区别简体和繁体，你就可以继续学习如何正确地在 CSS 或者 App l10n 中使用字体了。我有时候看到有人只做了日文的 l10n，比方说，使用 OS X\u002FiOS \u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FHiragino\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EHiragino Mincho\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 作为 body 文本的字体，这是很有问题的。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E标点符号与繁体中文不符；\u003C\u002Fli\u003E\u003Cli\u003E有一些繁体字体没有包含在 Adobe Japan 1-6 中，很多都是简体的；降级后你的文章看起来就像是一封加密的邮件；\u003C\u002Fli\u003E\u003Cli\u003E漢字(Hanzi\u002FKanji) 在日本、中国、台湾\u002F香港以及越南都有用，但是它们是不一样的。\u003Cimg src=\&http:\u002F\\u002Fe87abb2daeab8cadacfcf_b.jpg\& data-rawwidth=\&1566\& data-rawheight=\&792\& class=\&origin_image zh-lightbox-thumb\& width=\&1566\& data-original=\&http:\u002F\\u002Fe87abb2daeab8cadacfcf_r.jpg\&\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E我把 OS X \u002F iOS \u002F Windows 以及 Android 的系统字体列在下面，方便你选择正确的字体，某些字体在老版的系统或者 iOS App 中并没有，你需要做一些\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002FLibrary\u002Fios\u002Fsamplecode\u002FDownloadFont\u002FListings\u002FDownloadFont_ViewController_m.html%23\u002F\u002Fapple_ref\u002Fdoc\u002Fuid\u002FDTS-DownloadFont_ViewController_m-DontLinkElementID_6\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E额外的工作\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，从 Apple 下载它们。\u003Cimg src=\&http:\u002F\\u002F3d7fe370fc6eba0aa2ca28f_b.jpg\& data-rawwidth=\&1090\& data-rawheight=\&800\& class=\&origin_image zh-lightbox-thumb\& width=\&1090\& data-original=\&http:\u002F\\u002F3d7fe370fc6eba0aa2ca28f_r.jpg\&\u003E\u003C\u002Fp\u003E\u003Cp\u003E说到 Android，Droid Sans Fallback 对于 CJK 来说就是满满的痛。如果你希望字体好看些，\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fget\u002Fnoto\u002F%23\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ENoto Sans\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 是一个不错的方案。不好的地方在于 CJK 字体体积很大，你必须抽取其中的子集来减少加载的时间。你也可以尝试下像 \u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Findex\u002Findex.jsp%23%26panel1-1\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EiFontCloud\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 这样的动态 webfont 子集服务。或者干脆忽略 Android 的叹息声。 \u003C\u002Fp\u003E\u003Ch2\u003E3. 合适的 line-height\u003C\u002Fh2\u003E\u003Cp\u003E除了 line-height，字体大小也有关系。但是我很难告诉你字体到底该多大合适。在活字印刷时代，合适的中文字体大小应该是 10.5pt （请\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPoint_%2528typography%2529\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E折算\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E成实际大小，不能用在 CSS 中），不能低于 9pt。与你的设计风格有关。但是要记住，人们不喜欢阅读小的字，尤其是在屏幕上。\u003C\u002Fp\u003E\u003Cp\u003E但是 line-height 有合适的数字，通常在 1.5 到 2.0em 之间，你只需要：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ep { line-height: 1.7 }\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这就行。\u003C\u002Fp\u003E\u003Ch2\u003E4. justify 是万能的\u003Cimg src=\&http:\u002F\\u002F4bf5f3ea4ec1d_b.jpg\& data-rawwidth=\&340\& data-rawheight=\&237\& class=\&content_image\& width=\&340\&\u003E\u003C\u002Fh2\u003E\u003Cp\u003E这是一种古老的中文或自印刷（木制的）！暗示了中文排版的重要原则：所有的字符都是方形的。\u003C\u002Fp\u003E\u003Cp\u003E但是到了 20 世纪，标点符号被用在出版业中。而且现代的桌面出版工具采用了源自日本的“prohibition rules(禁則處理)”，不允许句号、逗号等等出现在行首。而且要求英文单词不可以截断。因此我们无法保证所有东西都是横竖对齐的。但是至少，我们可以保证行的开始和结束可以对齐。这也是为什么 justify 对于电子书或者长文重要的原因。\u003C\u002Fp\u003E\u003Cp\u003E在 CSS 中，你可以试试：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ep { text-align: text-justify:}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E中文的排版立马更漂亮了一些。\u003C\u002Fp\u003E\u003Ch1\u003E5. 不使用斜体\u003C\u002Fh1\u003E\u003Cp\u003E在中国，用毛笔书写的习惯持续了上千年。中文的“草书”并不是像拉丁文一样使用斜体，而直接就是\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCursive_script_%2528East_Asia%2529\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E弯曲\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的。有好些草书字体，比如 Kai，Xing（\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSemi-cursive_script\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E行书\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E），cao（\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCursive_script_%2528East_Asia%2529\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E草书\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E）等。\u003Cimg src=\&http:\u002F\\u002Ffef3aa0cbe96c_b.jpg\& data-rawwidth=\&800\& data-rawheight=\&520\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&http:\u002F\\u002Ffef3aa0cbe96c_r.jpg\&\u003E\u003C\u002Fp\u003E\u003Cp\u003E数字时代之前，你找不到使用斜体的中文。而且也不应该存在。在某些情况下，像 em、blockquote 这样的标记默认对中文字符使用斜体，请使用 CSS 修正它：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Eem { font-style: }\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cblockquote\u003Eem 可以加粗、可以无衬线，但不能是斜体的。\u003C\u002Fblockquote\u003E\u003Ch2\u003E6. 段的分隔\u003C\u002Fh2\u003E\u003Cp\u003E有两种方式来分隔段落：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E1. 书本式\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E在中文书籍中，段落之间是没有额外间隙的，需要使用两个字符的缩进，即：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ep { margin: 0; text-indent: 2}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E你也可以使用日文的处理方法，使用 U+3000（表意空格）代替 text-indent。在某些情况下尤其有用，比如 Safari 的阅读工具可能会强制覆盖你的样式，这么做可以保留缩进。\u003C\u002Fp\u003E\u003Cp\u003E这种样式同样适用于电子书。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E2. 网页式\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E但是在人们浏览网页时，书本式的排版会让他们感到压力。你可以直接添加 margin-after 或者 margin-bottom 来分隔段落：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ep { margin-after: 0.5}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E记住，别留太多的空白，0.5 - 1em 之间最佳。\u003C\u002Fp\u003E\u003Ch2\u003E7. Kai 更靠近书本式\u003C\u002Fh2\u003E\u003Cp\u003EMing (明體)\u002FSung(宋體) 这样的衬线字体通常用在正文中。而非衬线字体则过于现代，很少在印刷业中使用。\u003Cimg src=\&http:\u002F\\u002Ff6fffd39_b.jpg\& data-rawwidth=\&745\& data-rawheight=\&800\& class=\&origin_image zh-lightbox-thumb\& width=\&745\& data-original=\&http:\u002F\\u002Ff6fffd39_r.jpg\&\u003E\u003C\u002Fp\u003E\u003Cp\u003E通常，在引用、对话或者独白中，我们常常使用 Kai（楷書）。大多数的桌面操作系统都包含 Kai，如果你希望让读者感觉上更书本式一点，可以用这个字体。\u003C\u002Fp\u003E\u003Cp\u003E不然的话，非衬线字体也是可以接受的。\u003C\u002Fp\u003E\u003Ch2\u003E8. break-all vs 禁则策略\u003C\u002Fh2\u003E\u003Cp\u003E齐行是解决中文排版的数字方法，但是不是最好的。而且问题很容易重现：\u003Cimg src=\&http:\u002F\\u002F6b90b6d37f7de4e724e2a8_b.jpg\& data-rawwidth=\&314\& data-rawheight=\&395\& class=\&content_image\& width=\&314\&\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E杂志排版窄栏，手机上；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E中文字符中插入了一个较长的拉丁词（或者多个）；\u003C\u002Fli\u003E\u003Cli\u003E使用了齐行。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E上图中，由于齐行字间距被拉大的，甚至超过了 1em！在排版软件和浏览器中都存在这个问题。\u003C\u002Fp\u003E\u003Cp\u003E一种快捷的解决方案，就添加：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ep { word-break: break- }\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E效果很好。但是偶尔，break-all 会违反标点符号的规则，会导致逗号、句号出现在行首。在简体中文中有这样的问题，但在繁体中文中不存在。\u003Cimg src=\&http:\u002F\\u002Fdb8f8629cbb0e66e9727_b.jpg\& data-rawwidth=\&314\& data-rawheight=\&408\& class=\&content_image\& width=\&314\&\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这是为什么呢？因为简体中文中的标点符号就像日文一样，放在左下角，当它们出现在行首时，感觉很奇怪。\u003C\u002Fp\u003E\u003Ch2\u003E9. 谨慎使用 letter-spacing\u003C\u002Fh2\u003E\u003Cp\u003E对于中文正文，你不需要处理 letter-spacing。在香港有一些网站，它们使用了字符间距，但这不是好的做法。\u003Cimg src=\&http:\u002F\\u002Fe37ca866ab8fdda96f4a5_b.jpg\& data-rawwidth=\&761\& data-rawheight=\&579\& class=\&origin_image zh-lightbox-thumb\& width=\&761\& data-original=\&http:\u002F\\u002Fe37ca866ab8fdda96f4a5_r.jpg\&\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E这是怎么回事？这是无法分清横竖的问题。中文可以横排也可以竖排。line-height 是唯一的提示该如何阅读。如果你添加了 letter-spacing，你应该使用更大的 line-height、最终，这文章就是没法读了，因此：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E无需调整字间距，在标题中使用 letter-spacing，在正文中不使用。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch2\u003E10. 简体不能转成繁体，但是可以繁体转简体\u003Cimg src=\&http:\u002F\\u002F55bf4049573eed2f5989_b.jpg\& data-rawwidth=\&1156\& data-rawheight=\&740\& class=\&origin_image zh-lightbox-thumb\& width=\&1156\& data-original=\&http:\u002F\\u002F55bf4049573eed2f5989_r.jpg\&\u003E\u003C\u002Fh2\u003E\u003Cp\u003E在这个表格中，你可以看到常用的中文繁体和简体字符。这存在一些问题，一些文字有不同的编码，简体的编码是这个，但繁体的编码是另外一个。只不过大多数的工具使用一个映射表来做转换。\u003C\u002Fp\u003E\u003Cp\u003E但是有 267 个繁体中文如果通过简转繁的结果不一致。举两个例子：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003ETC→SC：皇后、後世→皇后、后世\nSC→TC：皇后、后世→皇后、后世\nTC→SC：呂布→呂布\nSC→TC：呂布→呂佈\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E所以如果你想做一个简单的转换，你必须使用一个基于字典的转换器。或者做一些校对。\u003C\u002Fp\u003E\u003Cp\u003E就这么多，并没什么难点，记得用就行。\u003C\u002Fp\u003E\u003Cp\u003E原文：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002F%40bobtung\u002Fbest-practice-in-chinese-layout-f933aff1728f\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EBest Practices for Chinese Layout\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cimg src=\&http:\u002F\\u002F0c4fe5e5bea2bf530506b_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&320\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&http:\u002F\\u002F0c4fe5e5bea2bf530506b_r.jpg\&\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T08:13:51+08:00&,&url&:&\u002Fp\u002F&,&title&:&中文排版的最佳实践&,&summary&:&译者注：我翻译完成后发现文本已经有了繁体中文版：\u003Ca href=\&http:\u002F\u002Fbinb.tw\u002Febookmag\u002F00\u002F00.html\& data-editable=\&true\& data-title=\&簡單做好中文排版\&\u003E簡單做好中文排版\u003C\u002Fa\u003E，抱歉。 使得长篇文章更易读的十条法则如果你想把你的业务扩展到亚洲，首先会碰到的是语言壁垒（然后是GFW）。中日韩三国使用不一样的排版规则。\u003Ca href=\&http:\u002F\u002Fwww.w3.org\u002FTR\u002Fjlreq\u002F\& data-editable=\&true\& data-title=\&Requirements for Japanese Text Layout\& class=\&\&\u003ERequirements for Japanese Text Layout\u003C\u002Fa\u003E …&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:16,&likesCount&:477},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fdc7ae392f0bb4fdeaa68f_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Facebook&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&JavaScript&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&MVC&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&AngularJS&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&不同凡想，心成伟事。&,&isFollowing&:false,&hash&:&0d9b98af12015c94cff646a6fc0773b5&,&uid&:52,&isOrg&:false,&slug&:&stein.cun&,&isFollowed&:false,&description&:&https:\u002F\u002Fqianduan.group，JavaScript、Node.js、CoffeeScript，欢迎微信搜索「前端外刊评论」关注我们用心打造的公众号，每周推送高质量前端资讯！&,&name&:&寸志&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fstein.cun&,&avatar&:{&id&:&369e5e380&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&FrontendMagazine&,&name&:&前端外刊评论&},&content&:&\u003Cblockquote\u003EFlux 很不直观，没什么好的文档，而且一直在更新。作为一个脑子不好使的我，真的希望在我摸索学习 Flux 的时候，有人能告诉我下面这些东西。\u003C\u002Fblockquote\u003E\u003Cp\u003E这是 \u003Ca href=\&http:\u002F\\u002FFrontendMagazine\u002F\& class=\&internal\&\u003EReactJS 傻瓜教程\u003C\u002Fa\u003E的续篇。\u003C\u002Fp\u003E\u003Ch2\u003E应该使用 Flux 吗？\u003C\u002Fh2\u003E\u003Cp\u003E如果你的应用需要处理\u003Cstrong\u003E动态的数据\u003C\u002Fstrong\u003E，那很可能需要使用 Flux。\u003C\u002Fp\u003E\u003Cp\u003E如果只是一些\u003Cstrong\u003E静态的视图\u003C\u002Fstrong\u003E，它们之间不共享状态，你也没什么数据保存或者更新，就不需要使用 Flux，用了也没什么好处。\u003C\u002Fp\u003E\u003Cp\u003E为什么需要 Flux？\u003C\u002Fp\u003E\u003Cp\u003EFlux 是一种相对比较复杂的概念，你可能会问，为什么要增加复杂度？\u003C\u002Fp\u003E\u003Cp\u003E90% 的 iOS 应用本质都是\u003Cstrong\u003E在把数据塞到 Table View 中\u003C\u002Fstrong\u003E。iOS 的开发工具集包含了设计优秀的 View 和 Data Model，让开发变得非常容易。\u003C\u002Fp\u003E\u003Cp\u003E在前端（HTML、JavaScript、CSS），我们没有这些东西。但有\u003Cstrong\u003E一个很大的问题\u003C\u002Fstrong\u003E：前端项目的架构没有一个统一的标准。而且，我们已经花了很多年的时间摸索，结果好的方法没找到，出现了很多类库。使用 jQuery、Angular、Backbone 还是 Handlebars？但正真的问题是数据流的架构还没有。\u003C\u002Fp\u003E\u003Ch2\u003E什么是 Flux ？\u003C\u002Fh2\u003E\u003Cp\u003EFlux 被用来描述“单向”的数据流，且包含某些特殊的事件和监听器。Flux 没有类库，但是你需要 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Ffacebook\u002Fflux\u002Fblob\u002Fmaster\u002Fsrc\u002FDispatcher.js\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EFlux Dispather\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，需要某个\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002F\u002F22\u002Fmicroeventjs.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E JavaScript 事件库\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。\u003C\u002Fp\u003E\u003Cp\u003E官方文档有些意识流，作为读者不知从何开始。但是一旦你的脑子里有了 Flux 的概念，这些文档可以帮助你补充一些细节。\u003C\u002Fp\u003E\u003Cp\u003E千万别对比 Flux 和 MVC 架构，比来比去只会越看越糊涂。\u003C\u002Fp\u003E\u003Cp\u003E我开始深入点看看吧，我将\u003Cstrong\u003E逐个解释\u003C\u002Fstrong\u003E相关的概念。\u003C\u002Fp\u003E\u003Ch2\u003E1. View 层 “Dispatch” “actions”（分发操作）\u003C\u002Fh2\u003E\u003Cp\u003EDispatcher 本质上就是一个事件系统。它负责广播事件和注册 callback。有且只有一个全局的 Dispatcher。推荐使用\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Ffacebook\u002Fflux\u002Fblob\u002Fmaster\u002Fsrc\u002FDispatcher.js\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EFacebook 的 Dispatcher 库\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，举个很简单地例子：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EAppDispatcher\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Enew\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EDispatcher\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E();\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E比方说有一个“新建”按钮，点击把条目添加到一个列表中。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&button onClick={ this.createNewItem }&New Item&\u002Fbutton&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E点击后会发生什么？View 层触发一个特定事件，包括事件名和新条目的数据：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EcreateNewItem\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eevt\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EAppDispatcher\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edispatch\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EeventName\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'new-item'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EnewItem\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'Marco'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E
\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E2. Store 响应事件\u003C\u002Fh2\u003E\u003Cp\u003E和 Flux 一样，Store 就是 Facebook 随便找的一个词。在应用中，我们需要特定的处理逻辑和数据集合来存储列表，这就是我们所谓的 Store。我们给它起个名字吧——ListStore。\u003C\u002Fp\u003E\u003Cp\u003EStore 就是一个单例，意味着你不需要 new 出来。ListStore 就是一个全局的对象：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EListStore\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003Eitems\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[],\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EgetAll\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eitems\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&p\&\u003E};\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后 Store 响应分发出来的事件：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EListStore\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&err\&\u003E…\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nx\&\u003EAppDispatcher\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eregister\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Epayload\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&k\&\u003Eswitch\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Epayload\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EeventName\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&k\&\u003Ecase\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'new-item'\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EListStore\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eitems\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epush\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Epayload\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EnewItem\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ebreak\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EFlux 就是使用这种传统的方法处理 callback。payload 包含一个事件名和数据。使用 switch 语句来决定调用哪个操作。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E关键：\u003C\u002Fb\u003EStore 不是 model，而是 model 的容器。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E关键：\u003C\u002Fb\u003E应用中唯一知道如何更新数据的就是 Store。这是 Flux 最重要的一部分。我们分发的事件是不知如何添加或者删除条目的。\u003C\u002Fp\u003E\u003Cp\u003E再比如，应用的其他部分需要保存图片和它们的源信息，你需要使用另外一个 Store，可以取名为 ImageStore。一个 Store 就代表了应用的一个“领域”。如果应用足够大，那领域划分就是比较明显的。如果应用不大，那很可能只需要一个 Store。\u003C\u002Fp\u003E\u003Cp\u003E只有 Store 可以注册 callback。View 永远都不应该调用 AppDispatcher.register。Dispatcher 的存在就是为了把消息从 View 传递到 Store。而 View 则是响应另外一种事件。\u003C\u002Fp\u003E\u003Ch2\u003E3. Store 触发 “change” 事件\u003C\u002Fh2\u003E\u003Cp\u003E渐入佳境了！现在数据已经变化了，我们要通知其他部分。\u003C\u002Fp\u003E\u003Cp\u003EStore 触发一个事件，但不使用 Dispatcher。迷糊是吧，不过这就是 Flux 的方式。给 Store 插上可以触发事件的翅膀。如果你使用 \u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002F\u002F22\u002Fmicroeventjs.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EMicroEvent.js\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E ，可以这么写：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EMicroEvent\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Emixin\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EListStore\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E接下来就是触发事件：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ecase\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'new-item'\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EListStore\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eitems\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epush\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Epayload\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EnewItem\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EListStore\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etrigger\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'change'\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&k\&\u003Ebreak\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cb\u003E关键：\u003C\u002Fb\u003E就单单触发事件，不传递最新的条目。View 只关心是不是有东西改变了。接下来跟着看看为什么。\u003C\u002Fp\u003E\u003Ch2\u003E4. View 层响应 “change” 事件\u003C\u002Fh2\u003E\u003Cp\u003E现在我们需要显示列表了，当列表变化的时候，View 就完全重绘。对我说的没错。\u003C\u002Fp\u003E\u003Cp\u003E首先，当 Component “上马”的时候，监听 ListStore 的 change 事件，就是在 Component 创建时：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EcomponentDidMount\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E
\u003Cspan class=\&nx\&\u003EListStore\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ebind\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'change'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ElistChanged\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E简单点，直接调用 forceUpdate，触发重绘。另外一种方式，就是把整个列表保存在 state 中。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ElistChanged\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EforceUpdate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E();\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u