![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 71
小小小小小亮
蓝翔毕业,致力于实现用挖掘机炒菜!~
展开
-
React高级教程(es6)——(1)JSX语法深入理解
简介:从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比如:<MyButton color="blue" shadowSize={2}> Click Me</MyButton>编译结果:React.createElement( MyButton,原创 2016-11-28 20:25:52 · 3491 阅读 · 0 评论 -
翻译君Mobx,Ten minute introduction to MobX and React
简要介绍:最近看了一下Mobx,然后有一篇入门教程是英文的,这里翻译一下并写写自己的心得体会。原文地址:https://mobx.js.org/getting-started.html一、Mobx的核心思想(1)Mobx的核心思想概括:贯穿mobx状态管理机的核心思想是使得state保持一致性,我是这么理解的,任何来源于state的数据,显示都应该与state的改变保持一致性,换句话说,只要stat翻译 2017-07-27 20:46:54 · 862 阅读 · 0 评论 -
React 16.0中的新特性——portal及其注意点
简要介绍:React16.0中发布了很多新特性,我们来看portal,React提供了一个顶级API—portal,用来将子节点渲染到父节点之外的dom节点1.基本用法(1)在React15.X版本中,我们只能讲子节点在父节点中渲染,基本用法如下:render() { // React需要创建一个新的div来包含子节点 return ( <div> ...原创 2017-11-10 16:03:14 · 6135 阅读 · 0 评论 -
React 16.0中的新特性——Error Boundaries及其注意点
简要介绍:在之前的React版本中规定,如果在组件中javascript报错,那么会在下一次的render中阻断,并且现实空白页。React之前没有提供一种合适的处理组件错误的方法,而React16.0中通过Error Boundaries来处理组件内部的错误,从而可以修正错误组件。1.什么是Error Boundaries?单一组件内部错误,不应该导致整个应用报错并显示空白页,而Error Bou原创 2017-11-13 15:39:21 · 4840 阅读 · 3 评论 -
谈谈React中的Render Props
简要介绍:分离UI与业务的方法一直在演进,从早期的mixins,到HOC,再到Render Prop,本文主要对比HOC,谈谈Render Props1 . 早期的mixins早期复用业务通过mixins来实现,比如组件A和组件B中,有一些公用函数,通过mixins剥离这些公用部分,并将其组合成一个公用集合,然后将这个集合传递给每个组件调用。//公有的函数部分const someMixins={原创 2018-03-19 19:38:51 · 5321 阅读 · 0 评论 -
异步方案选型redux-saga 和 redux-thunk(async/await)
简要介绍:redux中的action仅支持原始对象(plain object),处理有副作用的action,需要使用中间件。中间件可以在发出action,到reducer函数接受action之间,执行具有副作用的操作。之前一直使用redux-thunk处理异步等副作用操作,在action中处理异步等副作用操作,此时的action是一个函数,以dispatch,getState作为形参,函数体内的部分原创 2018-03-24 15:46:45 · 24355 阅读 · 1 评论 -
React16.x中的服务端渲染(SSR)
简要介绍:为了SEO和加快首屏加载速度,React提供了服务端渲染(Server Side Render)。本文结合express,来介绍一下React16.x中的SSR。本例代码:https://github.com/forthealllight/react16.0-ssr一、为什么要SSR单页应用将UI层和内容都由javascript来渲染,搜索引擎或网页爬虫需要完成的HTML结构...原创 2018-04-11 15:15:39 · 6274 阅读 · 1 评论 -
React16.3中的Refs和Forwarding Refs
简要介绍:React16.3中修改了Refs的使用方法,并且提供了Forwarding Refs用于在父组件中操作子组件中的dom节点,本文介绍一下新的Refs表示方法以及Forwarding Refs。Ref的功能就不具体说了,就是在父组件中直接操作子组件的方法,Ref的方式,使其脱离了props传值,然后更新子组件的标准方法。1 . React16.3中的Refs(1)创建16...原创 2018-04-19 19:57:27 · 14525 阅读 · 3 评论 -
通过Pure Render和Immutable实现React中的性能优化
简要介绍:React中的render存在着不必要的渲染,可以通过Puer Render(PureComponent)来减少渲染的次数,但是Puer Render只是进行浅比较,无法实现深层对象上的性能优化。Pure Render结合Immutable可以减少渲染次数。1 . React中的render仅通过React中的render,存在着不必要的渲染,这种不必要的渲染分为两大类。(1)自身的sta原创 2018-04-20 21:27:51 · 1224 阅读 · 0 评论 -
彻彻底底教会你使用Redux-saga(包含样例代码)
Redux-saga使用心得总结(包含样例代码),本文的原文地址:原文地址本文的样例代码地址:样例代码地址 ,欢迎star最近将项目中redux的中间件,从redux-thunk替换成了redux-saga,做个笔记总结一下redux-saga的使用心得,阅读本文需要了解什么是redux,redux中间件的用处是什么?如果弄懂上述两个概念,就可以继续阅读本文。 re...原创 2018-07-10 09:48:59 · 26289 阅读 · 6 评论 -
发布一个react组件——react-read-pdf,用于在移动端展示PDF文件
PC端的浏览器对于PDF文件的展示没有太大的问题,给定一个PDF的链接,就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个"http://www.baidu.com/test/pdf"。 如何在移动端展示这个文件。为了在移动端展示和渲染PDF文件的内容,本文在pdfjs的基础上实现了一个简单的react组件,用于展示和渲染PDF文件。将这个react组件,以npm包的形式发...原创 2018-10-25 16:05:49 · 5559 阅读 · 5 评论 -
React中的高阶组件(HOC)
简要介绍:React中不会用到组件的继承,作者选择用组合来代替继承,但是存在一种情况,就是两种组件方法类似,如果能有一种“类继承”的方式,在同一个函数中可以生产这两种组件,那么就可以大量的减少代码的冗余,在React的高阶组件实现了Decorator 模式来模拟继承或者说来代替继承。1、什么是高阶组件(high order component)高阶组件的定义:就是一个函数,这个函数传入一个组件,然后原创 2017-07-22 16:46:12 · 2790 阅读 · 0 评论 -
Redux源码深度解析
简要介绍:用了一段时间redux,今天看了一下redux的源码,大致整理了心得如下。1、什么是redux,这里就不做介绍,如想了解可以移步 ReadMe.redux,整体redux的代码只有800行,src下面分为一下几个部分。–applyMiddleware.js–bindActionCreators.js–combineReducers.js–compose.js–createStore.js–原创 2017-07-21 21:51:59 · 686 阅读 · 0 评论 -
Redux源码拾遗,关于createStore的第三个参数
简要介绍:再看redux文档的时候,发现了createStore是允许第三个参数的,看了一下源码明白了第三个参数的作用。一、createStore的第三个参数的定义(1)官方定义:createStore(reducer, [initialState], enhancer),第三个参数enhancer, 是一个组合 store creator 的高阶函数,返回一个新的强化过的 store creato原创 2017-07-29 19:04:30 · 5830 阅读 · 2 评论 -
React高级教程(es6)——(2)对于Refs最新变动的理解
1.什么是ReactJS中的refs在React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。如原创 2016-11-28 20:48:32 · 3610 阅读 · 0 评论 -
React高级教程(es6)——(3)React中的Context
简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递。但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传递,我们希望在某一级子组件中,直接得到上N级父组件中props中的值。1.一般情况下通过props传值的情况class Button extends React.Component { render原创 2016-11-30 15:52:53 · 10573 阅读 · 3 评论 -
Reacter-router(config)基础配置项
简介:路由的配置项,是为了说明路由是如何根据url来匹配的,并且决定何时根据某一段url执行某一个函结合官方文档来介绍一些路由的基础配置项。1.我们在介绍Reacter-router的基础时,介绍了路由的基本使用方法:import React from 'react'import { render } from 'react-dom'import { Router, Route, Link }原创 2016-11-22 11:23:38 · 7086 阅读 · 0 评论 -
ReactJS+es6+gulp+browserify开发环境搭建
通过前端自动化工具gulp,同时要实现commonjs规范,来搭建reactJS+es6的开发环境1.npm init初始化package.json文件2.我们需要将jsx转化为js语法,并且同时将es6/es7转化为es2015,这里我们来介绍一下browserify转化工具。(1)什么是browserifybrowserify可以实现类似模块管理器(比如npm,bower等),但是broweri原创 2016-11-21 20:10:34 · 1565 阅读 · 1 评论 -
React中,通过iframe,实现文件下载功能
简要介绍:我们可以通过iframe,动态设置src,来实现下载功能。1.通用的iframe实现下载功能。<script>function download(){ var url="http://www.baidu.com?fileId="1234" document.getElementById("ifile").src=url;}</script> <a href="#" on原创 2016-12-19 13:44:42 · 14033 阅读 · 0 评论 -
React-router(ES6)
简介:React由一套完整的路由机制,下面我们根据官方文档,来了解一下官方路由React-router1.路由的本质:是通过hash值不同,显示不同的页面,因为不用刷新整个页面,就能切换显示,因此通过这种路由机制,我们可以实现单页应用。首先:我们来自己写一个袖珍型的路由。const About = React.createClass({/*...*/})const Inbox = React.cr原创 2016-11-21 21:29:53 · 1921 阅读 · 0 评论 -
ES6中的import和export
简要介绍:ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单。ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块。1.以对象属性形式的export和import(1)一般的形式//export.jsexport let x=1...原创 2016-12-29 19:44:12 · 1982 阅读 · 0 评论 -
React-router中,结合webpack实现按需加载
简要介绍:在React-router中,暴露了3个接口,如果结合webpack的code splitting,就通过切换路由实现按需加载。1.webpack的code splittingwebpack可以通过一些方法,来实现按需加载,暴露的接口为require.ensurerequire.ensure(["module-a", "module-b"], function() { var a =原创 2016-12-30 16:16:06 · 8818 阅读 · 0 评论 -
从函数的柯里化,看Redux中间件的实现
简介:同步请求时,dispatch(action)发出请求,到接受请求reducer(state,action)是同步的。如果当我们需要异步请求时,状态应该变为dispatch(action)——wait()——reducer(state,action)。处理异步的函数wait(),就是中间件的概念,也就是发出请求后,并不是同步马上执行的,引入中间件后:dispatch(action)——中间件——原创 2016-12-20 16:26:46 · 1624 阅读 · 0 评论 -
React高级教程(es6)——(4)ShouldComponentUpdate的用法
简介:ShouldCompleteUpdate,下文简称SCU,就是指明什么时候component(组件)需要进行更新。1.常见的SCU的用法:(1)比如在下面的例子中,组件中只有2个值,props.color和state.count可以发生改变,我们可以这样使用SCU。class CounterButton extends React.Component { constructor(props原创 2016-12-28 14:29:04 · 18444 阅读 · 1 评论 -
Redux中的bindActionCreators
简要介绍:Redux中的bindActionCreators,是通过dispatch将action包裹起来,这样可以通过bindActionCreators创建的方法,直接调用dispatch(action)(隐式调用)。主要用处:一般情况下,我们可以通过Provider将store通过React的connext属性向下传递,bindActionCreators的唯一用处就是需要传递action c原创 2017-01-06 15:50:47 · 17740 阅读 · 3 评论 -
在React项目中,如何优雅的优化长列表
对于较长的列表,比如1000个数组的数据结构,如果想要同时渲染这1000个数据,生成相应的1000个原生dom,我们知道原生的dom元素是很复杂的,如果长列表通过生成如此多的dom元素来实现,很可能使网页失去响应。 贯穿React核心的就是"virtual dom",我们同样的可以通过用虚拟列表的方式来优雅的优化长列表原生dom渲染长列表的缺陷虚拟列表优化长列表的原理通过rea...原创 2019-01-14 19:18:12 · 8494 阅读 · 1 评论