liwusen的博客

简介：从根本上来说，JSX语法提供了一种创建React元素的语法糖，JSX语句可以编译成： React.createElement(component, props, …children)的形式，比如：<MyButton color="blue" shadowSize={2}> Click Me</MyButton>编译结果：React.createElement( MyButton,

简要介绍：最近看了一下Mobx，然后有一篇入门教程是英文的，这里翻译一下并写写自己的心得体会。原文地址：https://mobx.js.org/getting-started.html一、Mobx的核心思想（1）Mobx的核心思想概括：贯穿mobx状态管理机的核心思想是使得state保持一致性，我是这么理解的，任何来源于state的数据，显示都应该与state的改变保持一致性，换句话说，只要stat

简要介绍：React16.0中发布了很多新特性，我们来看portal,React提供了一个顶级API—portal，用来将子节点渲染到父节点之外的dom节点1.基本用法（1）在React15.X版本中，我们只能讲子节点在父节点中渲染，基本用法如下：render() { // React需要创建一个新的div来包含子节点 return ( &lt;div&gt; ...

简要介绍：在之前的React版本中规定，如果在组件中javascript报错，那么会在下一次的render中阻断，并且现实空白页。React之前没有提供一种合适的处理组件错误的方法，而React16.0中通过Error Boundaries来处理组件内部的错误，从而可以修正错误组件。1.什么是Error Boundaries?单一组件内部错误，不应该导致整个应用报错并显示空白页，而Error Bou

简要介绍：分离UI与业务的方法一直在演进，从早期的mixins，到HOC，再到Render Prop，本文主要对比HOC，谈谈Render Props1 . 早期的mixins早期复用业务通过mixins来实现，比如组件A和组件B中，有一些公用函数，通过mixins剥离这些公用部分，并将其组合成一个公用集合，然后将这个集合传递给每个组件调用。//公有的函数部分const someMixins={

简要介绍：redux中的action仅支持原始对象（plain object），处理有副作用的action，需要使用中间件。中间件可以在发出action，到reducer函数接受action之间，执行具有副作用的操作。之前一直使用redux-thunk处理异步等副作用操作，在action中处理异步等副作用操作，此时的action是一个函数，以dispatch，getState作为形参，函数体内的部分

简要介绍：为了SEO和加快首屏加载速度，React提供了服务端渲染（Server Side Render）。本文结合express，来介绍一下React16.x中的SSR。本例代码：https://github.com/forthealllight/react16.0-ssr一、为什么要SSR单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构...

简要介绍：React16.3中修改了Refs的使用方法，并且提供了Forwarding Refs用于在父组件中操作子组件中的dom节点，本文介绍一下新的Refs表示方法以及Forwarding Refs。Ref的功能就不具体说了，就是在父组件中直接操作子组件的方法，Ref的方式，使其脱离了props传值，然后更新子组件的标准方法。1 . React16.3中的Refs（1）创建16...

简要介绍：React中的render存在着不必要的渲染，可以通过Puer Render（PureComponent）来减少渲染的次数，但是Puer Render只是进行浅比较，无法实现深层对象上的性能优化。Pure Render结合Immutable可以减少渲染次数。1 . React中的render仅通过React中的render，存在着不必要的渲染，这种不必要的渲染分为两大类。（1）自身的sta

Redux-saga使用心得总结（包含样例代码），本文的原文地址：原文地址本文的样例代码地址：样例代码地址 ，欢迎star最近将项目中redux的中间件，从redux-thunk替换成了redux-saga，做个笔记总结一下redux-saga的使用心得，阅读本文需要了解什么是redux，redux中间件的用处是什么？如果弄懂上述两个概念，就可以继续阅读本文。 re...

PC端的浏览器对于PDF文件的展示没有太大的问题，给定一个PDF的链接，就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个"http://www.baidu.com/test/pdf"。 如何在移动端展示这个文件。为了在移动端展示和渲染PDF文件的内容，本文在pdfjs的基础上实现了一个简单的react组件，用于展示和渲染PDF文件。将这个react组件，以npm包的形式发...

简要介绍：React中不会用到组件的继承，作者选择用组合来代替继承，但是存在一种情况，就是两种组件方法类似，如果能有一种“类继承”的方式，在同一个函数中可以生产这两种组件，那么就可以大量的减少代码的冗余，在React的高阶组件实现了Decorator 模式来模拟继承或者说来代替继承。1、什么是高阶组件（high order component）高阶组件的定义：就是一个函数，这个函数传入一个组件，然后

简要介绍：用了一段时间redux，今天看了一下redux的源码，大致整理了心得如下。1、什么是redux，这里就不做介绍，如想了解可以移步 ReadMe.redux，整体redux的代码只有800行，src下面分为一下几个部分。–applyMiddleware.js–bindActionCreators.js–combineReducers.js–compose.js–createStore.js–

简要介绍：再看redux文档的时候，发现了createStore是允许第三个参数的，看了一下源码明白了第三个参数的作用。一、createStore的第三个参数的定义（1）官方定义：createStore(reducer, [initialState], enhancer)，第三个参数enhancer, 是一个组合 store creator 的高阶函数，返回一个新的强化过的 store creato

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

简介：在React中，数据可以以流的形式自上而下的传递，每当你使用一个组件的时候，你可以看到组件的props属性会自上而下的传递。但是，在某些情况下，我们不想通过父组件的props属性一级一级的往下传递，我们希望在某一级子组件中，直接得到上N级父组件中props中的值。1.一般情况下通过props传值的情况class Button extends React.Component { render

简介：路由的配置项，是为了说明路由是如何根据url来匹配的，并且决定何时根据某一段url执行某一个函结合官方文档来介绍一些路由的基础配置项。1.我们在介绍Reacter-router的基础时，介绍了路由的基本使用方法：import React from 'react'import { render } from 'react-dom'import { Router, Route, Link }

通过前端自动化工具gulp，同时要实现commonjs规范，来搭建reactJS+es6的开发环境1.npm init初始化package.json文件2.我们需要将jsx转化为js语法，并且同时将es6/es7转化为es2015，这里我们来介绍一下browserify转化工具。（1）什么是browserifybrowserify可以实现类似模块管理器（比如npm,bower等），但是broweri

简要介绍：我们可以通过iframe，动态设置src，来实现下载功能。1.通用的iframe实现下载功能。<script>function download(){ var url="http://www.baidu.com?fileId="1234" document.getElementById("ifile").src=url;}</script> <a href="#" on

简介：React由一套完整的路由机制，下面我们根据官方文档，来了解一下官方路由React-router1.路由的本质：是通过hash值不同，显示不同的页面，因为不用刷新整个页面，就能切换显示，因此通过这种路由机制，我们可以实现单页应用。首先：我们来自己写一个袖珍型的路由。const About = React.createClass({/*...*/})const Inbox = React.cr

简要介绍：ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单。ES6模块主要有两个功能：export和importexport用于对外输出本模块（一个文件可以理解为一个模块）变量的接口import用于在一个模块中加载另一个含有export接口的模块。1.以对象属性形式的export和import（1）一般的形式//export.jsexport let x=1...

简要介绍：在React-router中，暴露了3个接口，如果结合webpack的code splitting，就通过切换路由实现按需加载。1.webpack的code splittingwebpack可以通过一些方法，来实现按需加载，暴露的接口为require.ensurerequire.ensure(["module-a", "module-b"], function() { var a =

简介：同步请求时，dispatch（action）发出请求，到接受请求reducer(state，action)是同步的。如果当我们需要异步请求时，状态应该变为dispatch（action）——wait()——reducer（state，action）。处理异步的函数wait()，就是中间件的概念，也就是发出请求后，并不是同步马上执行的，引入中间件后：dispatch(action)——中间件——

简介：ShouldCompleteUpdate，下文简称SCU，就是指明什么时候component（组件）需要进行更新。1.常见的SCU的用法：（1）比如在下面的例子中，组件中只有2个值，props.color和state.count可以发生改变，我们可以这样使用SCU。class CounterButton extends React.Component { constructor(props

简要介绍：Redux中的bindActionCreators，是通过dispatch将action包裹起来，这样可以通过bindActionCreators创建的方法，直接调用dispatch(action)(隐式调用）。主要用处：一般情况下，我们可以通过Provider将store通过React的connext属性向下传递，bindActionCreators的唯一用处就是需要传递action c

  对于较长的列表，比如1000个数组的数据结构，如果想要同时渲染这1000个数据，生成相应的1000个原生dom，我们知道原生的dom元素是很复杂的，如果长列表通过生成如此多的dom元素来实现，很可能使网页失去响应。  贯穿React核心的就是"virtual dom",我们同样的可以通过用虚拟列表的方式来优雅的优化长列表原生dom渲染长列表的缺陷虚拟列表优化长列表的原理通过rea...