原文: https://medium.com/react-ecos...译者序：React组件生命周期有很多文章介绍了，这篇作者列出了很多开发中可能不会注意的细节，比如哪些阶段执行setState是否会导致render等，对React组件性能优化有一定的帮助，故译之，不当之处敬请指正！github issue: https://github.com/chemdemo/c...

原文作者：http://www.cnblogs.com/Leo_wl/p/4780750.html 因为redux和react的版本更新的比较频繁，博客园这里用的redux版本是1.0.1，如果你关心最新版本的使用技巧，欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ，我会在这里进行持续的更新和纠错。Re

简介redux是可预测的JS应用状态容器。状态现在有一个开关按钮组件ToggleButton，而按钮的on/off就是这个组件的状态。一个应用里面会有大量的组件，而管理以及传递这些组件的状态，就成了非常繁琐的工作。redux使用一个非常简洁的思路，方便地提供不同层级组件的解耦式状态操作。管理状态reudx本身是一个非常简单的流程概念，它仅仅是一个状态容器。如图：APP或

原文地址：https://segmentfault.com/a/1190000005356568前言：在当下的前端界，react 和 redux 发展得如火如荼，react 在 github 的 star 数达 42000 +，超过了 jquery 的 39000+，也即将超过前几年比较火的angular 1 的 49000+；redux 的 star 数也要接近 20000，可见大家对其的热

本文主要是对 Redux 官方文档 的梳理以及自身对 Redux 的理解。单页面应用的痛点对于复杂的单页面应用，状态（state）管理非常重要。state 可能包括：服务端的响应数据、本地对响应数据的缓存、本地创建的数据（比如，表单数据）以及一些 UI 的状态信息（比如，路由、选中的 tab、是否显示下拉列表、页码控制等等）。如果 state 变化不可预测，就会难于调试（state 不

原文地址：https://segmentfault.com/a/1190000004215810前言在《Redux系列01：从一个简单例子了解action、store、reducer》里面，我们已经对redux的核心概念做了必要的讲解。接下来，同样是通过一个简单的例子，来讲解如何将redux跟react应用结合起来。我们知道，在类flux框架设计中，单向数据流转的方

先看例子其实，redux的核心概念就是store、action、reducer，从调用关系来看如下所示store.dispatch(action) --> reducer(state, action) --> final state可以先看下面的极简例子有个感性的认识，下面会对三者的关系进行简单介绍// reducer方法, 传入的参数有两个// state: 当

原文地址：https://segmentfault.com/a/1190000004236064?utm_source=Weibo1. 前言随着WEB应用变得越来越复杂，再加上node前后端分离越来越流行，那么对数据流动的控制就显得越发重要。redux是在flux的基础上产生的，基本思想是保证数据的单向流动，同时便于控制、使用、测试。redux不依赖于任意框架(库)

http://gaearon.github.io/redux/index.html ，文档在 http://rackt.github.io/redux/index.html 。本文不是官方文档的翻译。你可以在阅读官方文档之前和之后阅读本文，以加深其中的重点概念。根据该项目源码的习惯，示例都是基于 ES2015 的语法来写的。Redux 是应用状态管理服务。虽然本身受到了 Flux 很深的影

原文地址：http://www.ruanyifeng.com/blog/2016/01/flux.html过去一年中，前端技术大发展，最耀眼的明星就是React。React 本身只涉及UI层，如果搭建大型应用，必须搭配一个前端框架。也就是说，你至少要学两样东西，才能基本满足需要：React + 前端框架。Facebook官方使用的是 Flux 框架。本文就介绍如何在 R

原文链接：http://www.cocoachina.com/webapp/20150928/13600.htmlReact Flux架构简介React 简介请戳这里。Flux是什么Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架，开发者不需要太多的新

React Router 一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。概览在阐明React Router可以帮你解决的问题之前我们来举一个没有引用React Router 的简单例子。没使用 React Routervar About = React.createClass({ render: fun

原文地址：http://stylechen.com/react-router.htmlReact Router 是专为 React 设计的路由解决方案，在使用 React 来开发 SPA （单页应用）项目时，都会需要路由功能，而 React Router 应该是目前使用率最高的。React Router 并不是 Facebook 的 React 官方团队开发的，但是据说有官方人

1.概论Facebook构建数据不断变化的大型应用。数据变化——大量dom操作、逻辑及其复杂自动dom操作状态对应内容特点：简单声明式React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。2.环境搭建（当

原文地址：http://www.ruanyifeng.com/blog/2016/05/react_router.html真正学会 React 是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做法。举例来说，React 不使用 HTM

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例（backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。使用方法如下：html>html lang="en">head> meta charset="UTF-8">

React 组件实例在渲染的时候（实例化）创建，这些实例在接下来渲染中会被重复使用。要调用组件上的API，首先需要获取对组件的引用。在组件方法内部可以通过this访问，在组件外唯一访问组件方法就是通过React.render的返回值，在其它组件内访问组件，可以使用refs获得对组件的引用。设置状态：setState替换状态：replaceState设置属性setProps替换属

React 基于状态实现对DOM控制和渲染。组件状态分为两种：一种是组件间的状态传递、另一种是组件的内部状态，这两种状态使用props和state表示。props用于从父组件到子组件的数据传递。组件内部也有自己的状态：state，这些状态只能在组件内部修改。数据流与Props1.1 设置props1.2 JSX语法中的属性设置1.3 props的传递组件内部状态与s

原文地址：http://itbilu.com/javascript/react/4JIk-Q7Yl.html使用React.createClass()方法创建组件时，需要传入一个参数对象，React会根据这个对象创建组件。这个参数对象中，除了包含必须要实现的render方法外，还有一些组件的设置属性。组件生命周期中的一些处理函数，也是在这个对象中定义的。组件的定义定

React中一个组件就是一个状态机，在组件的生命周期中，随着组件props或state的改变，其DOM表现形式也会有所变化。React组件的生命周期分为：创建期、存在期、销毁&清理期，在生命周期的不同阶段，React提供了不同的处理函数（组件API），通过这些处理函数使我们能够实现对组件整个生命周期内的控制和处理。组件的生命周期概述创建期2.1 创建期调用的方法2.2

React组件及子组件最终通过render方法渲染到DOM中，该方法由ReactDOM类库提供。页面的渲染可以在客户端或服务端完成，ReactDOMServer类库使你可以在服务端完成组件的渲染。通过this.props.children属性可以访问组件的子节点，而对子节点的处理的方法则由React.Children类提供。ReactDOM类库1.1 渲染ReactEl

JSX可以减少定义组件的复杂性，但对于React来说JSX并不是必须的，JSX标签最终会被转换为原生的JavaScript。除使用JSX语法外，还可以使用React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。React引用元素操作API2.1 创建元素：React.createElement()2.2 元素克隆：React.

一、属性的含义和用法props = properties3种用法：(1)  (key="Tim",key={123},key={"Tim"},key={[1,2,3]},key={variable})(2)var props = {one:"123",two:321}(3)调用.setProps({name:"Tim"}); 几乎不使用这个方法html>h

一、组件的生命周期介绍组件的本质是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以使用事件的思路来理解状态。组件的生命周期：1.初始化阶段   getDefaultProps   getInitialState:   componentWillMount   render   componentDidMou

1.什么是JSXJSX = JavaScript XMLJSX是：基于ECMAScript的一种新特性；一种定义带属性树结构的语法；JSX不是：不是html或xml；不是一种限制（推荐使用，也可以不使用）特点：类xml语法，容易接受增强js语义结构清晰抽象程度高（诞生了跨平台 react native）代码模块化2

一、事件处理函数的使用鼠标事件：onClickonContextMenuonDoubleClickonMouseDownonMouseEnteronMouseLeaveonMouseMoveonMouseOutonMouseOveronMouseUponDroponDragonDragEndonDragEnteronDragExit

组件协同使用：

一、不可控组件和可控组件不可控组件：数据写死。可控组件：为什么组件要可控：符合React的数据流数据存储在state中，便于使用便于对数据进行处理不可控组件代码：html>html lang="zh-cn">head> meta charset="UTF-8"> title>表单详解title>head>body>script

React+Redux非常精炼，良好运用将发挥出极强劲的生产力。但最大的挑战来自于函数式编程（FP）范式。在工程化过程中，架构（顶层）设计将是一个巨大的挑战。要不然做出来的东西可能是一团乱麻。说到底，传统框架与react+redux就是OO与FP编程范式的对决。简单学习某项技术并不能让建立起一个全局理解，也很难工程化。所以，我们必须要看以下几方面：了解其独特的东西。如React中组件是