风火一回，一生不毁

React Hooks 前言 react hooks是react 16.8.0版本开始推广的。 class声明的组件我们称之为有状态组件，function声明的组件我们称之为无状态组件。 有状态组件拥有自己的状态和生命周期，在复用组件时我们需要考虑复用时是否对其自身状态造成影响。而函数组件数据全部依赖于props传入，更易管理。 有状态组件通常我们数据初始化在componentDidMount生命周期，数据更新需要在componentDidUpdate再次重置自身状态。当项目复杂化后，这部分的代码维护容易

React教学（1） React产生背景 React 是Facebook 在2013年推出的一款前端框架。 当时Facebook的开发者在实现首页状态栏的时候，要实现当前好友请求数、消息列表、状态列表3者的展示。发现当有一条新的消息出现时，不能及时的刷新显示的数字，点开一条新的消息也不能立即更新消息数字。 问题出现的原因： 传统的UI操作需要关注的细节太多了。 应用程序的状态又太过分散在各处...

React 深入理解 1.1 React父子组件传参 父组件向子组件传参：在父组件中为子组件添加属性，在子组件中通过this.props.属性名获取。 子组件向父组件传参：在父组件中为子组件添加事件属性，在子组件中通过this.props.事件名(参数),通过回调函数的方式将参数值传递给父组件。 兄弟组件传参:兄弟组件无法直接进行参数传递，这时就需要用到状态提升的方式，将兄弟需传递的属...

React-Mirrormirror是阿里巴巴团队提供的一个开源框架。其主要作用是简化React、Redux开发的步骤。传统的React-Redux开发，需要逐步定义action、reducer、component等相关东西，看起来比较冗长。mirror框架将这些操作进一步封装，使之使用起来更加简单。安装Mirror$ npm i --save mirror使用import React from '

React生命周期详解React严格定义了组件的生命周期会经历如下三个过程： 装载过程（Mount），组件第一次在DOM树渲染的过程。 更新过程（Update），当组件被重新渲染的过程。 卸载过程（Unmount），组件重DOM树中删除的过程。 执行这3个过程的调用函数就是声明周期函数。装载过程该过程会依次调用如下函数： constructor():ES6类的构造函数（为了初始化state或绑定th

React动画效果平常我们使用的动画效果大多和jQuery.animate()相关，但是React就是被用来取代jQuery的。所以在动画实现的选择上我们常常选择CSS3的原生支持来实现。但是，CSS3的动画过程是:“在什么时间范围内，以什么样的运动节奏完成动画”。在用原生CSS3实现动画时，不好调试，因为动画过程可能一闪而过，并且在React中，样式的渲染必须等到组件已经挂载完成后，那么在组件加载

现在网上有很多封装好的插件，但是我没有找到适合我们项目需求的，所以自定义封装了这个图片上传组件。该组件是基于React设计的，希望对你有帮助。你也可以去https://github.com/windSandEye/img-upload/tree/master下载我的源码。组件js文件(img-upload.js)import React from 'react'; import { Icon, Mo

1.父组件->子组件 父组件向子组件通信是通过在子组件中定义属性实现的，然后子组件可以使用this.props拿到父组件的方法或者参数。例如： 父组件 import React from 'react'; import ButtonTest from './ButtonTest.js' export default class RuleDemo3 extends React.Compone

Redux流程图React和Redux分工React-Redux将所有组件分为了UI组件和容器组件。UI组件不带任何逻辑，只负责渲染，所有的数据都通过this.props提供。（由React负责）容器组件负责数据管理和业务逻辑处理。（由Redux负责）Providerreact-redux提供了Provider组件，用于保存store给子组件中connect使用。将它包裹在根组件的最外层，它会将st

1.新建一个空项目 2.生成package.json文件 在Teriminal中执行： cnpm init 修改生成文件中的scripts： "scripts": { "start": "webpack", "dev":"webpack-dev-server" }, 这里的配置意思是：可以用npm start代替webpack命令，用npm

这一篇将在上一篇的基础上做修改，不太清楚的朋友可以看这里：http://blog.csdn.net/mafan121/article/details/71425526 首先，在components文件夹下创建ContentTest.js文件，文件内容如下： import React from 'react'; export default class ContentTest exte

React拥有独有的语法，jsx语法。 使用React至少需要3个包的支持： react.js:React核心库 react-dom.js:React与DOM相关的操作库 Browser.js:将JSX语法解析成JavaScript语法，这一步比较耗时，最好放在服务端完成。 一般情况下，我们会使用如下命令安装React: cnpm install --save-dev

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

表单是前端非常重要的一块内容，并且往往包含了错误校验等逻辑。  React对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更统一更规范。 约束性和非约束性组件 表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。 约束性组件，简单的说，就是由React管理了它的value，而非约束性组件的value就是原生的DOM管理的。 

1.插件下载 首先，下载react-eveloper-tools开发调试工具插件。 官网下载路径：https://github.com/facebook/react-devtools 谷歌下载.crx后缀的文件，火狐下载.xpi后缀的文件。 因为谷歌插件下载需要翻墙，这里提供一个本地资源：http://download.csdn.net/detail/mafan121/9838773

在使用ES6编写React组件的时候，你会发现es6支持的 static defaultProps = { autoPlay: false, maxLoops: 10, }; static propTypes = { autoPlay: React.PropTypes.bool.isRequired, maxLoops: React.Pr