每天三分钟，知晓天下事，视频、语音、文字综合版任您挑！微信搜索fgzadmin关注或点击标题下方可以快速关注。
原创不易，认可价值，动手指点并转发，就是最好的支持与肯定。淘宝特约店址：http://goldengame.
深夜十点，陪你读书。
慢工出细活
由于中、美、俄三国自2008年后基本上长期上演“三国杀”（昨天文章《原创丨中美俄世纪三国杀，谁是百年长跑冠军
其实这是个有奖活动贴。n其实这是个有奖活动贴。n其实这是个有奖活动贴。
思考者正在阅读原创丨三次世界大战亚洲开打，美国推演靠谱吗？原创丨央行连出两大招，有何深意？微历史丨张学良为啥
美国总统奥巴马日在接受媒体采访时表示，2011年对利比亚局势的干涉，是其总统生涯中做出的最
我们都知道，美国软实力很厉害，在过去很多年都一直掌控者国际话语权，他们可以提着民主、自由、人权的大棒满世界乱
思考者正在阅读原创丨重大变革，我们的世界都将逃不过被TA重塑！原创丨中美黄岩岛较量，谁是最后赢家？原创丨你射React 入门教程 - 技术翻译 - 开源中国社区
React 入门教程
【已翻译100%】
英文原文：
推荐于 2年前 (共 13 段, 翻译完成于 06-15)
参与翻译&(5人)&: ,
React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架。 实现了一个虚拟 DOM，用 DOM 的方式将需要的组件秒加，用不着的秒删。React 扮演着 MVC 结构中 V 的角色， 不过你要是 Flux 搭配使用， 你就有一个很牛X的能让轻松让 M 和 V 同步的框架了，Flux 的事以后再说~
在 React 中，你可以创建一个有特殊功能的组件，这在 HTML 元素里你是打着灯笼也找不到的，比如这个教程里的下拉导航。每个组件都有自己的地盘(scope)，所以我们定义一个组件后可以反复的用反复的用，根本就不需要和别的组件交互！
每个组件都有一个功能叫 render ， 它可以高效的返回要射到浏览器上 HTML。我们也可以调用 React 的其他组件，这意味这一入 React 深似海，哦，不对，是只有想不到，没有做不到。
&翻译得不错哦！
如果你经常注意React你也许会发现有个东西叫JSX。JSX允许我们在Javascript中写HTML，而不是用HTML包含Javascript。它能帮助我们快速开发，因为我们不用担心字符串和换行等。你可以在浏览器中运行JSX，但是不推荐，因为这样会减慢你的页面速度。gulp和grunt为你的预处理任务提供了一个JSX解释器，所以如果你想使用JSX，我建议开启这个功能。
如前面所说，JSX每一个组件都有一个 render 方法，这个方法产生一个"ViewModel(视图模型)" - 在返回HTML到组件之前，你可以将这个模型(ViewModel)的信息放入视图中，意味着你的HTML会根据这个模型动态改变(例如一个动态列表)。
&翻译得不错哦！
一旦你完成了操作，就可以返回你想渲染(render)的东西，我们使用JSX来做是如此简单
var&ExampleComponent&=&React.createClass({
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&className="navigation"&
&&&&&&&&&&&&&&&&Hello&World!
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
如果你要在你的浏览器中运行这段代码，只会得到语法错误的提示，因为在Javascript中&和&字符要用引号包含起来。当你在代码上运行JSX解释器，它将被转换成这样
var&ExampleComponent&=&React.createClass({
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&React.createElement('div',&{className:&'navigation'},&'Hello&World!')
&&&&&&&&&&&&);
&- 我使用的是浏览器JSX解释器（这并不推荐，但是为了JSFiddle）。
运行了！JSX解释了你使用 React.createElement 生成的所有DOM节点，生成了节点类型、参数和内容。你可以不用JSX，但这意味着你必须要手动写 React.createElement 以外的所有DOM节点。无数例子告诉我要使用JSX。
你一定很疑惑我为什么在DOM上使用 className 来代替 class。这是因为 class 是Javascript的保留词。当JSX解释你的代码时就会改变这节点上的所有属性到一个对象上，但你不能把对象当作属性！
&翻译得不错哦！
将变量用在属性上如果你想动态改变组件的样式类(或者任何其他的属性值),你可以使用变量. 不过你不能只是传进去一个变量名称，你还要将其用一对大括弧包起来, 这样JSX就能知道这是一个外部的变量了.
var&ExampleComponent&=&React.createClass({
render:&function&()&{
&&&&var&navigationClass&=&'navigation';
&&&&return&(
&&&&&&&&&div&className={&navigationClass&}&
&&&&&&&&&&&&Hello&World!
&&&&&&&&&/div&
&&&&&&&&);
初始的渲染器当你最开始要渲染一个React组件时，你需要告诉React是要渲染什么组件，还要制定一个现有的DOM节点以表示在哪儿渲染这个组件. 为此你会要使用React.render函数.
var&ExampleComponent&=&React.createClass({
render:&function&()&{
&&&&return&(
&&&&&&&&&div&className="navigation"&
&&&&&&&&&&&&Hello&World!
&&&&&&&&&/div&
&&&&&&&&);
React.render(&ExampleContent&/&,&document.body);他将会在body节点上渲染组件——简单吧! 从此你就可以像通常那样调用其他的组件了, 或者如果你希望的话，可以使用render函数许多次, 如果你不想使用React来渲染整个页面，但仍然想要使用多个组件.
&翻译得不错哦！
一个组件的基础
组件可以拥有其自己的“状态”。这使我们能够重复多次使用相同的组件但却让它们看起来完全不同，因为每个组件实例的状态是唯一的。
当你通过传递属性到一个组件时这些被称为属性。不要只局限于 HTML 属性，你可以传递任何你想传递的东西，并在组件内通过 this.props 访问它。这样使得我们能够重复使用相同的组件但传递一组不同的属性，比如组件的“配置”。
根据我们前面“Hello World!”的例子，我们在 HTML 节点上有 className 的属性。在组件内部，我们可以使用 this.props.classname 访问这个值，但正如前面所述，你可以传递任何你喜欢的内容。对我们的下拉来说，我们需要将导航配置为对象，组件将使用它作为要渲染的配置。让我们开始吧—
var&navigationConfig&=&[];
var&Navigation&=&React.createClass({
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&className="navigation"&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
React.render(&Navigation&config={&navigationConfig&}&/&,&document.body);
如果现在能访问 this.props.config 的话，我们会受到一个空数组（navigationConfig 的值）。在我们进入到真正导航的编码前先让我们说明一下状态。
&翻译得不错哦！
如之前所讨论的，每一个组件都有其自己的”状态”。当要使用状态时，你要定义初始状态，让后才可以使用 this.setState 来更新状态。无论何时状态得到了更新，组件都会再一次调用 render 函数，拿新的值去替换或者改变之前渲染的值。这就是虚拟 DOM 的奥义 - 计算差异的算法实在 React 内部完成的，因此我们不用去以来 DOM 的更新了(因为 DOM 很慢)。React 会计算出差异并产生一堆指令的集合 (例如，加入向”navigation__link“加入”active“类，或者移除一个节点），并在 DOM 上执行它们。
使用导航，我们将下拉菜单打开保持在状态中。为此，添加一个 getInitialState 函数到类配置对象上，并返回带有我们想要的初始状态的对象。
var&navigationConfig&=&[];
var&Navigation&=&React.createClass({
&&&&getInitialState:&function&()&{
&&&&&&&&return&{
&&&&&&&&&&&&openDropdown:&-1
&&&&&&&&};
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&className="navigation"&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
React.render(&Navigation&config={&navigationConfig&}&/&,&document.body);
你会发现我们将其设置成了-1。当我们准备去打开一个下拉菜单时，将使用状态里面的配置数组中的导航项的位置，而由于数组索引开始于0，我们就得使用 -1 来表示还没有指向一个导航项。
我们可以使用 this.state 来访问状态，因此如果我们去观察 atthis.state.openDropdown，应该会有 -1 被返回。
&翻译得不错哦！
组件的生命周期
每个组件都有其“生命周期”—这是一系列你可以在组件配置里定义的函数，它们将在部件生命周期内被调用。我们已经看过了 getinitialstate 一它只被调用一次，在组件被挂载时调用。
componentWillMount
当组件要被挂载时这个函数被调用。这意味着我们可以在此运行组件功能必须的代码。为由于 render 在组件生命周期里被多次调用，我们一般会把只需要执行一次的代码放在这里，比如 XHR 请求。
var&ExampleComponent&=&React.createClass({
&&&&componentWillMount:&function&()&{
&&&&&&&&//&xhr&request&here&to&get&data
&&&&render:&function&()&{
&&&&&&&&//&this&gets&called&many&times&in&a&components&life
&&&&&&&&return&(
&&&&&&&&&&&&&div&
&&&&&&&&&&&&&&&&Hello&World!
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
&翻译得不错哦！
componentDidMount
一旦你的组件已经运行了 render 函数，并实际将组件渲染到了 DOM 中，componentDidMount 就会被调用。我们可以在这儿做任何需要做的 DOM 操作，已经任何需要依赖于组件已经实际存在于 DOM 之后才能做的事情, 例如渲染一个图表。你可以通过调用 this.getDOMNode 在内部访问到 DOM 节点。
var&ExampleComponent&=&React.createClass({
&&&&componentDidMount:&function&()&{
&&&&&&&&var&node&=&this.getDOMNode();
&&&&&&&&//&render&a&chart&on&the&DOM&node
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&
&&&&&&&&&&&&&&&&Hello&World!
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
componentWillUnmount
如果你准备吧组件从 DOM 移除时，这个函数将会被调用。这让我们可以在组件背后进行清理，比如移除任何我们已经绑定的事件监听器。如果我们没有在自身背后做清理，而当其中一个事件被触发时，就会尝试去计算一个没有载入的组件，React 就会抛出一个错误。
var&ExampleComponent&=&React.createClass({
&&&&componentWillUnmount:&function&()&{
&&&&&&&&//&unbind&any&event&listeners&specific&to&this&component
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&
&&&&&&&&&&&&&&&&Hello&World!
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
&翻译得不错哦！
React 也为组件提供了更方便我们工作的方法。它们会在组件的创建过程中被调用到。例如getInitialState，能让我们定义一个默认的状态，这样我们不用担心在代码里面对状态项目是否存在做进一步的检查了。
getDefaultProps
当我们创建组件时，可以按照我们的想法为组件的属性定义默认值。这意味着我们在调用组件时，如果给这些属性设置值，组件会有一个默认的“配置”，而我们就不用操心在下一行代码中检查属性这类事情了。
当你定义了组件时，这些默认的属性会被缓存起来，因而针对每个组件的实例它们都是一样的，并且不能被改变。对于导航组件，我们将配置指定为一个空的数组，因而就算没有传入配置，render 方法内也不会发生错误。
var&Navigation&=&React.createClass({
&&&&getInitialState:&function&()&{
&&&&&&&&return&{
&&&&&&&&&&&&openDropdown:&-1
&&&&&&&&};
&&&&getDefaultProps:&function&()&{
&&&&&&&&return&{
&&&&&&&&&&&&config:&[]
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&className="navigation"&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
React.render(&Navigation&config={&navigationConfig&}&/&,&document.body);
&翻译得不错哦！
我们也可以随意为每一个属性指定类型。这对于我们检查和处理属性的意外赋值非常有用。如下面的dropdown，我们指定只有数组才能放入配置。
var&Navigation&=&React.createClass({
&&&&getInitialState:&function&()&{
&&&&&&&&return&{
&&&&&&&&&&&&openDropdown:&-1
&&&&&&&&};
&&&&getDefaultProps:&function&()&{
&&&&&&&&return&{
&&&&&&&&&&&&config:&[]
&&&&propTypes:&{
&&&&&&&&config:&React.PropTypes.array
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&className="navigation"&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
React.render(&Navigation&config={&navigationConfig&}&/&,&document.body);
我们也可以在组件中加入 mixins。这是一个独立于 React 的基本组件（只是一个对象类型的配置）。这意味着，如果我们有两个功能类似的组件，就可以共享一个配置了（如果初始状态相同）。我们可以抽象化地在 mixin 中建立一个方法，这样就不用把相同的代码写上两次了。
var&ExampleMixin&=&{
&&&&componentDidMount:&function&()&{
&&&&&&&&//&bind&some&event&listeners&here
&&&&componentWillUnmount:&function&()&{
&&&&&&&&//&unbind&those&events&here!
var&ExampleComponent&=&React.createClass({
&&&&mixins:&[ExampleMixin],
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&
&&&&&&&&&&&&&&&&Hello&World!
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
var&AnotherComponent&=&React.createClass({
&&&&mixins:&[ExampleMixin],
&&&&render:&function&()&{
&&&&&&&&return&(
&&&&&&&&&&&&&div&
&&&&&&&&&&&&&&&&Hello&World!
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&);
这样全部组件都有一样的 componentDidMount 和 componentWillUnmount 方法了，保存我们重写的代码。无论如何，你不能 override（覆盖）这些属性，如果这个属性是在mixin里设置的，它在这个组件中是不可覆盖的。
&翻译得不错哦！
我们的翻译工作遵照 ，如果我们的工作有侵犯到您的权益，请及时联系我们
一语道破!精辟!!!
当你准备去构建一个复杂的可维护的ui应用时，用react是很对路的14:25:46 UTC
本来打算公司内分享 Elm 的, 但是最后只是梳理一下过了一些特性大致的稿子在这里, 可以看看中间的一些链接:Elm 需要不少的 Haskell 基础, 我现在只是比入门好点, 看代码有不少难度, 写就更远了所以只是初步写一下自己了解到的东西
Elm 和 React 的关联
Elm 是 Functional Reactive Programming 在近几年关注度很高的一个框架框架大概 2012 年左右出现的, React 好像是 2013 年发布的, 时间上 Elm 早一些Elm 其实是新的编程语言, 为了框架而设计的一门语言, 大致像 Haskell这门技术很大程度上就是为了研究而设计的, 所以实际开发当中不大见到但是中间有太多太多相似的地方, 甚至让我以为 React 就是在模仿 Elm
Hot Swapping
Elm 的 Hot Swapping 是内建在开发环境当中的, 很早就提出来了相比来说 React 还是靠后来的 Webpack HMR 模块才加上去的当然, 共同点, 都是 View 直接刷新, 但是状态保持不变~
Immutable Data
Elm 跟 Haskell 差不多, 都是纯函数式编程语言, 本身就是不可变数据注意, Elm 当中所有的数据都是不可变的, 比 ClojureScript 还彻底所以纯函数的那一套性能优化几乎是与生俱来的而 React 说到底, Component 层级的 State 多少还有 mutable 的成份在
Action, Global Dispatcher 的设计
Elm 当中 Model, View, Signal 层次分得非常清晰, React 的 Flux 倒是很像而且因为 Elm 完全是不可变数据, 就不能写成 Store 那样暴露方法和事件了,结果就是操作不可变数据的手法, 判断每个 Action, 生成新的一份数据~Action 在 Elm 当中可是很自然的, 在 Flux 里面多少有点奇怪..然后所有的操作, 都会将生成 Action, 交给 Dispatcher, 全局的
Virtual DOM
Elm 的 Virtual DOM 是很晚才加上去的, 估计就是受到 React 启发写法倒是难看一点, 各种方括号, 已经完全没有 JSX 那种清晰了但是从性能上, 似乎也到了 Om 的级别, 总之就是自带优化啦
Elm 不同之处
前面说了, 数据完全是不可变的, 直接就被优化了
View 层不止是 DOM, 而且有 Canvas 绘制的图形
没有 Component 概念, 也就是没有对应 State 的说法, 也没有生命周期函数
事件被抽象为 Signal, 大致可以理解成 Action 组成的流, 以流的方式被操作
Elm 的调试工具可以记录所有的 Model 和 Action, 可以查看以前旧的状态和界面
没有深入研究, 所以现在主要的感想是在数据存储这边因为我现在没学会 Om, 所以这里也没法跟 Om 做一些对比了...
全局数据, 刷新非常方便
Elm 的数据存放在全局的, 所以很容易就能把整个应用的状态保存下来了带来的就是回滚的巨大的方便, 随时切换到以前的界面回去而且没有 React 组件那么多琐碎事情, 一有修改整个界面刷新就好了
管理全局状态相对困难
同时这也是个问题, 我实际应用当中, 大量的组件, 大量的内部状态这些状态如果被存在在一个数据当中去维护, 应该是很繁琐的一个事情就是说这个结构可能会很深地嵌套起来, 这样我怎样加以利用呢?也许到时候参考下 Om 方面的做法...
实际上 Elm 官方给出的例子, 都是游戏和小应用之间的内容, Canvas 占不小的比例而这些例子当中也没有出现极为复杂的单页面应用级别的代码范例
Elm 的调试工具非常有意思
记录所有的 Action, 然后回滚到从前的某个状态查看具体错误...这种事情在 React 里现在想都不能想, 应用复杂起来很难回滚了但是局部的数据回滚好像是一个可以考虑的事情, 有机会学习一下
DOM 细节的控制
这个大概在 React 当中已经经常遇到了, 比如说 element.focus() 这类行为同样在 Elm 当中现在也想不清怎么做, 特别因为是纯函数.. 几乎不可能去操作 DOM
数据层的设计
Flux 的架构图放到 Elm 的代码实现当中感觉非常自然:界面操作 -& Action -& 更新 Model -& 渲染 View我觉得用上不可变数据之后, Flux 依然是一种不太自然的模拟因为 Store 很容易就让人想到"可变的对象暴露方法从外部修改内部数据"了实际上 Flux 是一再说明想要避免理解成可变的数据的还有一点有趣的, Flux Store 里的 switch 语法, Elm 当中用 case of 也很自然
Elm 完全使用不可变数据, 用了 Signal 对 Action 的流进行抽象, 方案很有意思从效果看, 也是 React 引入不可变数据想要达到的.. 可以借鉴不过 Elm 也有限制, 不清楚对于复杂的 Web 应用能做到什么程度.
另外我打算去尝试下 Om 来了解下社区已经探索到的程度...如果有同学的 Om 了解多的话也可以做一下分享啊~
15:58:28 UTC
同时这也是个问题, 我实际应用当中, 大量的组件, 大量的内部状态这些状态如果被存在在一个数据当中去维护, 应该是很繁琐的一个事情就是说这个结构可能会很深地嵌套起来, 这样我怎样加以利用呢?
这个深有感触，数据放在全局的store中，很爽，因为数据一变化整体刷新，这样view承担的任务非常的轻，具有很好的可扩展性，但是这样会损害一部分组件的易用性，比如，抽取一个datagrid组件，涉及到排序，分页，以及其他的一些状态的变化时，如果数据都是在全局store，必然带来的结果就是store要去知道组件的每个交互细节，要监听，分页，排序等。但是对于大多数的场景这样太verbose。所有我们现在的做法还原一部分状态到公共的组件，这样做到易用，另外对于复杂的业务，(数据各种奇葩来源已经数据的转换) 提供对外的数据接口，使store有能力去控制公共组件的数据，公共的组件的抽取感觉也是要遵循2/8原则，让80%的简单场景更简单，20%艰难场景变得可能简单。
00:30:58 UTC
看稿子里面它的历史状态跳转是借鉴Event Sourcing模式的，在自己的框架里面实现一下也可以。其他的设计也值得借鉴。
提点反面观点吧。函数式编程语言理论研究很棒，实战就容易陷入“理论优美”的坑。前几天看到一篇文，讲函数式语言的用户会很激动地讨论lambda的优美，介绍monad有多厉害，最后成果介绍用haskell实现一个REST服务端的诸多技巧，效果和rails new生成的例子程序差不多。
个人觉得OOP作为现实世界的模型是比FP更好的，FP更适合作为OOP实现中的借鉴（例如Reactive架构和Declarative实现）。至于不可变数据确实有其优势，不过个人更喜欢Ruby的哲学：我们都是成人，程序也是自己写的。如果数据不应该被改变，编程的时候就注意不要改变它就好了。
01:52:43 UTC
对 elm 感兴趣的可以看看
说说个人的看法，elm 的普遍思路是维护了一个全局的 immutable state，然后通过 signal（可以是用户输入事件，fps 等等），实现状态转移，生成一个新的 immutable state，之后将这个状态渲染成页面
和 flux 相对应来看，immutable state 就是 store，signal 就是 action，flux 实际上模拟了一个 frp 的实现
09:49:18 UTC
FP 在特殊的领域才能发挥不可提到的作用, 比如说极端的可靠性和一些性能的优化.从原理上将, 不可变数据和 OOP 两者是不可能同时存在的..当然, 通常来说, 编程当中写脚本, 只要 bug 数量控制得足够好, OOP 也是能解决绝大多数的问题的.
12:39:08 UTC
看到官博分享了这个怎么样呢好像FRP也不一定要用FRP
12:57:22 UTC
Bacon 之类的不是彻底的 FRP. 只是对事件的处理抽象成了 FRP 类似的 Signal 或者 Stream.
13:06:19 UTC
如果能达到同样的效果，就可以不学Elm/Haskell了除了语言难学，剩下的部分看起来还挺有诱惑力的
05:56:12 UTC
Bacon 跟纯粹的 FRP 还是有差別的,我理解大概 Bacon 相当于只是 FRP 的一个环节, 就是怎么处理事件流.
我个人还是很推荐 Haskell 的, 学了以后能认识到命令式编程究竟有哪些设计不够好的地方,真正用 Haskell 编程也许非常繁琐, 但是能理解现在写的代码存在哪些问题, 收获已经不小了
06:35:34 UTC
在搜Bacon.js的时候遇到了这个。有争论是Elm也应该归类为跟Bacon/Rx同类的Complex Event Processing。
不过比起争论定义，我对这类技术的实际应用更有兴趣。目前EventStore和Twitter的Storm也是把自己定位成CEP技术，也挺热的，不过在网站中的实际应用没怎么听说过。