2016年11月_沈斯明

转载实例讲解基于 React+Redux 的前端开发流程

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

2016-11-30 19:41:41 625

转载 react-redux 之 connect 方法详解

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

2016-11-30 19:32:02 15645 3

转载 react+redux教程

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

2016-11-30 19:10:45 966

原创 react教程之组件的生命周期

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

2016-11-30 19:06:44 348

原创 react教程之表单

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

2016-11-30 19:05:33 293

原创 react教程之this.state

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

2016-11-30 19:04:32 3548

原创 react教程之获取真实的DOM节点

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

2016-11-30 19:02:53 10380

原创 react教程之PropTypes

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

2016-11-30 19:01:51 930

原创 react教程序之this.props.children

this.props.childrenthis.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 demo05）。var NotesList = React.createClass({ render: function() { return ( ol>

2016-11-30 18:59:27 1638

转载 react教程之this.props.children