沈斯明技术博客

方法遵循正式的ES6 class的语义，意味着它们不会自动绑定this到实例上。你必须显示的使用.bind(this) or 箭头函数 =>：// 你可以使用 bind() 来绑定 `this`div onClick={this.tick.bind(this)}>// 或者你可以使用箭头函数div onClick={() => this.tick()}>我们建议你在构造函数中绑定

1. 性能意义：保持state不变这个约束引导我们使用局部更新对象的方法，这样会可以非常有效地提高react或其他显示框架的渲染效率。我们先来看看为了保持数据不变性，要怎么对state做更新，以我们的苹果篮子state为例：例子：通知开始摘苹果：apple/BEGIN_PICK_APPLE为了保证每个版本的state不变性，我们有两种实现方式：“深复制”，“浅复制”。我们来看两种模

带参数页面跳转[javascript] view plain copy this.props.history.pushState({passParam: true}, "/targetURL");  第一个参数为你页面跳转时，需要传递的参数，如果不需要传参数，则为null。第二个参数为跳转目标页面。

'use strict';import React from 'react/addons';import reactMixin from 'react-mixin';let { LinkedStateMixin } = React.addons;class App extends React.Component { constructor() { super();

转载自：http://blog.youkuaiyun.com/adzcsx2一、安装最新的node.js原博文是这样写说的npm install -g n //首先安装n模块 n stable //升级Node.js到最新稳定版 n 5.0.0 //或者指定版本升级 node -v //检查更新是否成功我自己是去重新下了一个最新版的node.js二、修改np

在Redux中最核心的自然是组件，以及组件相关的事件与数据流方式。但是我们在Redux中并没有采用传统的方式在getInitialState()中去初始化数据，而是采用Provider统一处理，省去了开发者不少工作，但是Redux到底如何将state中的数据传递给各组件的呢？还得看看Provider的源。1.常用数据传递写法在ReactJS中的数据传递一般采用state

原文（保持更新）：https://github.com/kenberkeley/redux-simple-tutorial/blob/master/redux-advanced-tutorial.md写在前面相信您已经看过 Redux 简明教程，本教程是简明教程的实战化版本，伴随源码分析Redux 用的是 ES6 编写，看到有疑惑的地方的，可以复制粘贴到这里在线编译 ES5

Redux 简明教程原文链接（保持更新）：https://github.com/kenberkeley/redux-simple-tutorial写在前面本教程深入浅出，配套 简明教程、进阶教程（源码精读）以及文档注释丰满的 Demo 等一条龙服务§ 为什么要用 Redux当然还有 Flux、Reflux、Mobx 等状态管理库可供选择抛开需

1.react-modalhttps://github.com/reactjs/react-modal2.react-modal-bootstraphttps://www.npmjs.com/package/react-modal-bootstrap

redux-thunk 是一个比较流行的 redux 异步 action 中间件，比如 action 中有 setTimeout 或者通过  fetch 通用远程 API 这些场景，那么久应该使用 redux-thunk 了。redux-thunk 帮助你统一了异步和同步 action 的调用方式，把异步过程放在 action 级别解决，对 component 没有影响。下面通过例子一步步来看

ref是React中的一种属性，当render函数返回某个组件的实例时，可以给render中的某个虚拟DOM节点添加一个ref属性，如下面的代码所示：[html] view plain copy print?body>      script type="text/jsx">          var App = React.crea

需要安装的软件node.jsnpm包管理以上两个包的下载地址如下：https://nodejs.org/dist/v6.3.0/node-v6.3.0.pkg由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm更换npm库的源由于国内的网络原因，推荐只用阿里的npm源地址npm config set registry https://

一 组合而不是继承React组件是无法继承的，即不存在 React.extend 之类的方法可以定义一个子类。React推崇通过组合的方式来组织大规模的应用。所以所谓父子组件，就和DOM中的父子元素一样，他们是有从属关系，但没有继承关系。比如：[javascript] view plain copyvar Team

当页面比较多时，项目就会变得越来越大，尤其对于单页面应用来说，初次渲染的速度就会很慢，这时候就需要按需加载，只有切换到页面的时候才去加载对应的js文件。react配合webpack进行按需加载的方法很简单，Route的component改为getComponent，组件用require.ensure的方式获取，并在webpack中配置chunkFilename。const chooseProd

react推崇的是单向数据流，自上而下进行数据的传递，但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多，如果只是父子级关系，父级可以将一个回调函数当作属性传递给子级，子级可以直接调用函数从而和父级通信。组件层级嵌套到比较深，可以使用上下文getChildContext来传递信息，这样在不需要将函数一层层往下传，任何一层的子级都可以通过this.conte

脱离JXSReact中并不一定要用JSX,JSX只是React.createElement(component, props, ...children)的语法糖，完全可以用原生JS替代示例：//JXSclass Hello extends React.Component { render() { return div>Hello {this.props.t

React Without ES6ES6语法创建组件class Greeting extends React.Component { render() { return h1>Hello, {this.props.name}/h1>; }}如果不用ES6语法，就需要用create-react-class模块创建var createReactCl

优化性能Avoid ReconciliationReact创建并保存一渲染UI的镜像，通常被称为virtual DOM,当组件的props或者state发生变化时，React会通过对比虚拟DOM和新返回的元素，如果二者不同，则更新DOM。在某些情况下，可以通过shouldComponentUpdate生命周期函数来加速这种对比的过程。此函数在重新渲染前触发，默认返回

Refs and the DOM通常情况下props是组件与组件之间通信的唯一方式，然而有时候会遇到需要在数据流之外紧急修改一些child(React component也可能是DOM),为解决这些问题React提供了一个escape hatch转义窗口什么时候使用refs以下有几种很好的适用场景：管理文本框获取焦点、文本选择、媒体资源重放触发要立即执行的动

用PropTypes检测类型注意：React v15.5.已经把React.PropTypes分离了，请用prop-types库替代npm install --save prop-types项目做大了后经常就会出现类型错误的bug，平时可以用JS插件如Flow,TypeScript检测。如果不用这些插件的话，React也提供了检测工具,给某个组件检测props类型时，可以

集成 VS 继承React有强大的集成模快，并且在项目中推荐使用集成而不是继承容器集成在项目中有时候在渲染前父组件不知道他的子组件是什么，在这种情况下建议用props的children属性把子元素传递到父组件中// 父组件function FancyBorder(props) { return ( div className={'FancyBorder

表单HTML中的表单标签默认有表单提交功能，在React中也适用，但是大多数情况下React通过JS方法获取表单数据再提交。React通过controlled components这项技术实现。Controlled Components(控件)原理：利用组件中state和setState的特殊性,React渲染组件后还会监听它的变化示例： 通过监听input

列表和keys基础的列表组件生成一个listItems数组，组件返回ul列表,渲染页面function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => li key={number.toString()}> {

绑定事件React事件名区别于DOM事件，以驼峰命名法JSX以函数的方式传递时间，而不是字符串//HTML:button onclick="activateLasers()"> Activate Lasers/button>//React:button onClick={activateLasers}> Activate Lasers/button>

开始写一个组件时如何判断哪些数据是需要写入state的?是由父组件通过props传递进来的吗？是否值永远都不会变化？是否可以通过其他state或props计算得出？如果有以上一种情况是肯定回答，这个值就可以不用作为state写入不可以直接修改state// 错误this.state.comment = 'Hello';//使用setState代替// 正确this.setState({commen

React 有状态组件及 key 属性的应用有状态组件在构建 React 组件时，一种较为常见的场景是需要通过 props 计算得到某些渲染数据，实现方式无外乎以下两种：方法一：在 constructor 中对 props 进行处理，用 state 承载最终的渲染数据。方法二：直接在 render 中计算并使用计算结果进行渲染。两种方式各有优劣：方法一在

比较推荐用 initialState() 一个自定义方法返回一个 state 的初始值比较好。因为在实际的使用过程中组件有可能需要在 componentWillReceiveProps 的时候重置状态，两个地方都需要使用初始 state 这时候使用一个 this.initialState() 方法会方便一点。另外 this.state 也可以直接在 class 中定义，如果在 cons

一 获取DOM元素react可以允许我们通过 ref 来定位一个组件。具体的做法是：先给一个组件设置一个 ref=‘xxx’ 的属性，注意这个ref必须是全局唯一的。然后就可以通过 this.refs.city 来访问这个组件。但是请注意，这里拿到的只是虚拟DOM，而不是真实的DOM。只有在render方法执行之后，并且react已经完成了D

在做React Native开发时，最常用的开发工具有 webStorm ,sublime ,appcode等，很多人都希望开发工具有智能提醒功能，然而我们使用上述开发工具进行React Native开发时并没有较好的提示功能。今天给大家介绍一款插件Webstrom live template  使webStrom支持React Native开发智能提醒。下面进入正题插件下载地址https:/

React和Redux的连接react-redux之前一直在探索React相关的东西，手上有个SPA项目，于是准备上Redux试试水。Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来做连接，这里的意思是，并不是没有react

Provider 是 react-redux 库提供的，redux 本身并不强制依赖它，然而问题是 redux 本身也不依赖 react。作为一个纯粹的 data layer，redux 并不关心你用什么视图引擎，所以如何访问 store 是你自己需要考虑的事情，redux 并不会约束你一定要怎么做。react-redux 是官方提供的解决方案，Provider 本身并没有做很多事情，只是

React+Webpack快速上手指南前言这篇文章不是有关React和Webpack的教程，只是一篇能够让你快速上手使用目前这两种热门技术的前端指南，并假设你对两者有一个基本的认识。如果你想先行了解下React，可以放肆的移步至 React官方教程，如果你已经使用了其他的模块加载与资源打包技术，不妨也来看看 Webpack 提供的思路。webstorm+react+

前言：在当下的前端界，react 和 redux 发展得如火如荼，react 在 github 的 star 数达 42000 +，超过了 jquery 的 39000+，也即将超过前几年比较火的angular 1 的 49000+；redux 的 star 数也要接近 20000，可见大家对其的热情程度，究竟是什么魔力让大家为之疯狂呢？让我们上车，亲自体验一波试试~~本文章偏向于讲解redux流

Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。react-redux 提供了两个重要的对象， Provider 和 connec

react+redux教程今天，我们通过解读官方示例代码（counter）的方式来学习react+redux。例子这个例子是官方的例子，计数器程序。前两个按钮是加减，第三个是如果当前数字是奇数则加一，第四个按钮是异步加一（延迟一秒）。源代码： https://github.com/lewis617/myReact/tree/maste

组件的生命周期组件的生命周期分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOMReact 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()compo

表单用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取（查看 demo9 ）。var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) {

this.state组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI （查看 demo08 ）。var LikeButton = React.createClass({ getInitialState: function() { return {liked: false

获取真实的DOM节点组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时

PropTypes组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（查看 demo06）。var MyTitle = React.createClass({ propTypes: { title: React.Pro