51dev.com IT技术开发者社区

51dev.com 技术开发者社区

热点资讯 HotNews

  • 三星为Note 7道歉会挽回现今颓势吗?三星为Note 7道歉会挽回现今颓势吗?
  • 58到家的上门O2O独角戏还能唱多久?58到家的上门O2O独角戏还能唱多久?
  • 1
  • 2
React-Redux系列1:简介和安装

React-Redux系列1:简介和安装

(1)初始化项目  安装完毕后,删除src下其他文件,留下index.js入口文件,如下所示      接下来首先安装redux和react-redux依赖(因为react-redux依赖redux,是在redux基础上建立起来的)>npmireduxreact-redux--save    ...

Redux中间件redux-saga中间件之安装、配置、使用

Redux中间件redux-saga中间件之安装、配置、使用

(1)前言    (2)安装  首先安装相关依赖>npmiredux-saga--save     (3)配置  接下来开始进行编写配置,文件位置src/store/index.js。先将之前的redux中间件redux-thunk做下备份,然后开始配置redux...

Redux中间件redux-thunk中间件之安装、配置、使用

Redux中间件redux-thunk中间件之安装、配置、使用

(1)概念图+简介      中间件相当于在Action到Reducer的中间放置了一个函数,常用场景:项目日志、创建奔溃报告、调用异步接口等等。   例如之前常用案例ToDoList里的Redux结合axios异步获取数据     实际开发里,一般会将异步调用放到Redux中间...

Redux优化之JS纯函数(Pure Function)

Redux优化之JS纯函数(Pure Function)

介绍一下一个函数式编程里面非常重要的概念——纯函数(PureFunction)。简单来说,一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。这么说肯定比较抽象,我们把它掰开来看:函数的返回结果只依赖于它的参数。函数执行过程里面没有副作用。consta=...

浅谈JS纯函数

浅谈JS纯函数

纯函数是函数式编程的基础,需要重点理解。纯函数的作用,可以看《JavaScript函数式编程之为什么要函数式编程(非严谨技术层面的扯淡)》。纯函数的概念:纯函数是这样一种函数,即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用。他的重点在于“相同的输入,永远会得到相同的输出”,后面所...

箭头函数返回对象 && 尾调用优化

箭头函数返回对象 && 尾调用优化

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。varsum=(num1,num2)=>{returnnum1+num2;}箭头函数返回对象,由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。vargetTempItem=id=&g...

箭头函数arrow function写法与规则 && this指向

箭头函数arrow function写法与规则 && this指向

JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进。this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系。一、JS中函数的写法1.常规函数的写法在ES6语法之前,JS中的函数由...

React动画库之react-transition-group(入场enter、出场exit、初始化appear)

React动画库之react-transition-group(入场enter、出场exit、初始化appear)

React动画通常有三种方法实现从易到难为:1、transition(CSS3自带)2、animation(CSS3自带)3、react-transition-group动画库(需要引入插件)  react生态圈十分庞大,类似于动画库有很多,这里我们介绍一款react-transition-grou...

animation-fill-mode控制CSS3动画结束状态

animation-fill-mode控制CSS3动画结束状态

分享一篇文章原文链接:http://caibaojian.com/animation-fill-mode.htmlcss3animation状态结束后可以通过animation-fill-mode控制动画的最后状态,分别是不改变默认行为、保持最后一个属性和回到第一帧。假如我们就想让一个元素从一个点,按照弧形,运动到另外...

React动画相关(CSS3过渡、动画、eact-transition-group动画库、多DOM动画制作和编辑)

React动画相关(CSS3过渡、动画、eact-transition-group动画库、多DOM动画制作和编辑)

一、transition(CSS3自带)1、用法示例:1234.hide{  /*过渡动画效果*/ opacity:1;  transition:all1sease-in;} 含义:透明度在1s内从0渐变为1 2、transition其他参数建议参考(http://ww...

EasyMock模拟请求数据

EasyMock模拟请求数据

除了常见的mock.js,最近发现一款新的前端模拟数据工具easy-mock。 官网:https://www.easy-mock.com/ 登录成功后点击右下角+号,进行项目创建  输入项目名等相关信息,创建项目    创建接口    写入数据,创建接口    创建接口完毕后,复制链接    替换接...

React之Axios请求远程数据

React之Axios请求远程数据

本节介绍下React+Axios实现远程数据请求 这里注意:axios是一个独立程序,本质就是对AJAX的封装,可以和很多框架结合使用。(1)安装依赖>npmiaxios--save    (2)引入使用  建议在componentDidMount生命周期函数里进行数据请求,这里我们...

React生命周期改善组件性能

React生命周期改善组件性能

之前已经介绍过了React的相关生命周期,这里介绍下通过生命周期函数componentWillReceiveProps实现组件性能优化。之前案例中的组件存在性能问题,即父组件的state更新时频繁渲染了子组件,也就是说父组件的输入框的值改动造成了子组件render的频繁触发渲染,性能上存在缺陷。 (1)设置调...

React生命周期钩子/函数详细介绍

React生命周期钩子/函数详细介绍

   综上所示,React生命周期钩子可以分为4个大阶段1、Initialization初始化阶段2、Mounting虚拟DOM挂载阶段3、Updation组件更新阶段4、Unmounting组件卸载阶段  通俗理解,就是在组件的某一时刻,自动执行的函数。从这个角度来看的话,constru...

React之ref操作DOM(ref = {input=>this.input = input})

React之ref操作DOM(ref = {input=>this.input = input})

学习react的同学肯定看过这种写法 注意这里的ref,写法为ref={(input)=>{this.input=input}}等价于ref={input=>this.input=input}等价于ref={(input)=>this.input=input}这里主要是ES6箭头函数arro...