@黄小泽的个人博客

在使用Create React App创建的React项目，通常会通过import引用所需的组件(如import HelloWorld from './HelloWorld')，当项目打包成生产环境代码时，通过这种方式引用的js文件都会被打包到一起。当前端项目代码量足够大时，这意味最终打包出来的index.js代码量也将会非常大，这明显不利于实现页面的秒加载。遇到这种场景，懒加载就提供了解决方案。...

在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，当遇到多个层级多个组件间共享一个props参数，这种树形的由上而下的传参方式就显得过于繁琐。一般多组件嵌套传参写法如下：// 底层function ThemedButton(props) { return <Button theme={props.theme} />;}...

部分 UI 的异常不应该破坏了整个应用。为了解决 React 用户的这一问题，React 16 引入了一种称为 “错误边界” 的新概念。错误边界是用于捕获其子组件树 JavaScript 异常，记录错误并展示一个回退的 UI的 React 组件，而不是整个组件树的异常。错误组件在渲染期间，生命周期方法内，以及整个组件树构造函数内捕获错误。错误边界通过componentDidCatch() 方...

高阶组件（HOC），它描述的便是接受React组件作为输入，输出一个新的React组件的组件。更通俗地描述为，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的React组件，供其他组件调用。它只是处理统一包装（处理）其它组件的一种模式。const EnhancedComponent = higherOrderComponen...

1.this.props.children this.props.children常用于对标签下元素、文本等的引用。它的值有三种可能：如果当前组件没有子节点，它就是undefined；如果有一个子节点，数据类型是Object；如果有多个子节点，数据类型就是array。React提供一个工具方法React.Children来处理this.props.children。我们可以用React.Chi...

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式，API如下：ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的React的子元素，例如一个元素，字符串或碎片。第二个参数（container）则是一个 DOM 元素。对于 portal 的一个典型用例是当父组件有overflow: hid...

render props实现了 子组件A共享父组件B的逻辑实现，换句话说，就是共享有关组件B的如：逻辑运算得出的状态值、dom节点的事件监听等。在dom结构上，子组件A被包裹在父组件B里面。实现的函数语句为：<B render={stateData => ( <A data={stateData}> />)}/>render props尽量用在一...

安装create-react-app脚手架由Facebook官方团队开发，主要是整合了如webpack等依赖包，因而无需每次都从零开始搭建react项目。该脚手架安装起来也非常方便，安装命令如下：# 全局安装"create-react-app"架构$ npm install -g create-react-app# 创建脚手架项目$ create-react-app my-app...

react开发中，组件直接传递参数需要props一层层代理，对于复杂组件，它可能嵌套的子组件非常多，层级也比较深，那么，如果还采用props链条来维护组件通信或者数据共享，将非常困难，也不利于开发和维护。因此，衍生出了Flux、Redux和react-redux，本篇主要介绍Flux。Flux框架也是一种MVC框架，它采用单向数据流，不允许Model和Control互相引用。Flux框架大致如...

首先要知道，Redux只是一种MVC的机制，它可以运行在任何的前端框架中。react-redux则是对Redux的核心模块(如store)进行封装，并加入了一些有利于react开发的模块，这样就可以更便捷的在react中运用redux。本篇将详细介绍react-redux开发中的常用模块。在阅读本文前，假设您已经基本理解了Redux的运行机制，若对其机制还不是很清楚，请参考上一篇《Flux、R...

续上篇，在Flux后，为了更好的实现MVC，Redux模式出现。不同于 Flux ，Redux 不再有dispatcher 的概念（Store已经集成了dispatch方法）。其次它依赖纯函数来替代事件处理器（即原来Flux中Dispatcher.register((action)注册逻辑处理这块），这个纯函数叫做Reducer。另外使用到了一个新概念 context，在React组件...

React Router 主要使用场景是单页面富应用(SPA)。实现有两种，一种是利用url的hash，就是常说的锚点(#)，JavaScript通过hashChange事件来监听url的改变；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“ / ”分割，没有#，不过这种模式需要服务端支持，当url所指向的位置在服务端中目录结构错误时，将报404。React Rou...

在开发react项目中，有些项目需要设置大量的样式文件，如果通过定义样式常量，纯嵌入的方式编写样式，这将会大大的降低效率。stylus + react-css-modules是一套可以提高样式编写效率的方案。stylus 是一套 css 预处理框架，而react-css-modules则实现了样式的模块化。Stylus参考实例：https://github.com/smallH/rea...

JS中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存，但当应用复杂后，这就造成了非常大的隐患，突变带来的优点变得得不偿失。为了解决这个问题，一般的做法是使用 shallowCopy（浅拷贝）或 deep...

使用 react 经常会遇到几个组件需要共用一个状态的情况，这种情况可以使用状态提升。举个现实的例子，如汇率兑换，在人民币输入栏中输入金额，其他国家货币相应的兑换金额就换算出来了，其实它们用的是同一个状态数据：输入金额。解决办法：将这部分共享的状态数据提升至最近的共同父组件当中进行管理。如下面Demo中，定义了一个子组件Dollar.jsx：代表汇率的输入框。定义了一个父组件Box.jsx：状...

受控组件在<input>这类表单元素中，当用户修改输入数据，表单会自动将其赋值到value属性中，这称为HTML元素维持了自身状态。但在react开发中，我们应尽可能的将这种可变的状态保存在组件的状态属性中，并且只能用 setState() 方法进行更新。也就是说，React不但负责渲染表单的组件而且自主控制着表单元素的输出值，这类组件称为受控组件。在开发组件时，应尽可能定义为受控...

React表达式用两个大括号{ }表示。简单来说，就是在元素标签中{ }里的js脚本可以被执行，有点类似于jsp的<%= %>。在表达式中不建议有太多逻辑实现，主要目的是为了可以返回一个可被渲染对象、内部方法函数、props或state，如标签元素，这类用法在本章做个简单了解即可。所以当你在React中看到以下写法：<div>{some code}</div&g...

在v16.x版本，创建组件的主要方法React.createClass被移除了，新的创建方法（ES5）如下：var createReactClass = require('create-react-class');var MyComp = createReactClass({ // some code }); ES6通过class来创建，如：import React from '...

props和state用于组件的参数传递和状态变化。props表示组件初始化参数，react官方认为，props应该是只读的，修改 props对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。该参数以向组件标签属性赋值的方式向组件传递数据，如<HelloWorld name="John"/>。获取参数时使用{this.props.attr}，attr表示属性名...

组件内部方法作用域在组件内部，一般用来更新状态和触发事件监听。除了一般用法外，还允许在父组件通过创建事件句柄  ，并作为 prop传递到你的子组件上，由子组件来调用，实现由子组件驱动更新父组件的state。//组件内部方法var Content = React.createClass({ render:function(){ return ( <div> ...

“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听。React 组件生命周期：componentWillMount ：在渲染前调用,在客户端也在服务端。componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。compo...

jquery在webpack中的引用写法：var $ = require('jquery');若想发生网络请求，在组件刚完成挂载componentDidMount的时候，只要遵照jquery的ajax标准写法标准即可：var AjaxTest = React.createClass({getInitialState:function(){ return { name : "...

React支持一种非常特殊的属性Ref，你可以用来绑定到 render输出的任何组件上。用法：在组件中设置属性ref="xxx"，则通过this.refs.xxx对该组件进行直接引用。var RefTest = React.createClass({ handleClick:function(){ this.refs.myInput.focus(); //获取焦点 consol...

混入（混合）是指定义一个对象，让组件去继承该对象的方法和状态的过程，该对象也被称为混入（混合）对象。若组件和被继承的混合对象具体相同的生命钩子函数将要被执行，则混合对象的函数会优先执行，然后再到组件内相同函数执行，但仅限于生命钩子函数。另外，组件内不允许有和混合对象相同命名的方法（非生命钩子函数），如例子中的handlAction，否则会报错。ReactClassInterface: You ...

在实际的项目开发过程中，以数组为格式对组件进行渲染的情况是经常出现的，如裂变的渲染。在React中，如果数组项item不为元素标签时，通常用arr.map(function (item,index) { return 组件或元素 })遍历数组并渲染。当数组项为字符串时：var Demo1 = React.createClass({ render:function(){ var na...

 寄语React对初学者入门较难，它也是现在前端三大主流框架之一。想了想，还是写一些文章吧，一来可以帮助想学习React的初学者，二来也可以总结经验，把这些知识点共享出来。在挑选React版本的时候，发现React最新版的v16.x和v15.x之间会有API出入。比如，v16.x不再支持最基本的渲染组件React.createClass这种写法。这就必将对一些React初学者造成很大疑惑，...

目前业界开发通用的模式是：后端负责提供数据，前端负责数据展现（也就是渲染），这种开发模式中大量使用了ajax来实现页面的局部刷新。何为渲染？如果我们只是想显示一堆不变的数据，那么我们直接写一个a.html丢到服务器上让客户端访问就可以了。但这是基本不可能的事情，数据一般是变化的。你不可能为每套数据写一个视图，所以我们需要分离数据和视图，然后使用一种技术将数据塞到视图中，这种技术就叫渲染

语法糖（Syntactic sugar），是指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会，本篇将介绍几个react常用的几个ES6语法糖。 箭头函数箭头函数是指使用 '=>' 来定义函数。正常的Function函数定义如下：var myFun = function(...

React是纯View层，但在最新的React V16版本中，按传统的纯js脚本开发已经不能适应项目的需要，配合Webpack打包，可以够更便捷地管理项目和更新插件；再者，使用ES6开发，将大大地提高团队地开发效率。本篇主要是介绍如何部署React+Webpack组合搭建，那么我们一步步来吧。一.创建目录结构创建一个web项目ReactWebpack，目录结构如图所示：app目录：...