风火一回，一生不毁

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