redux
沈斯明
这个作者很懒,什么都没留下…
展开
-
React+Webpack快速上手指南
React+Webpack快速上手指南前言这篇文章不是有关React和Webpack的教程,只是一篇能够让你快速上手使用目前这两种热门技术的前端指南,并假设你对两者有一个基本的认识。如果你想先行了解下React,可以放肆的移步至 React官方教程,如果你已经使用了其他的模块加载与资源打包技术,不妨也来看看 Webpack 提供的思路。webstorm+react+转载 2016-12-06 13:37:14 · 405 阅读 · 0 评论 -
ReactJS组件的组合和通信机制解析
一 组合而不是继承React组件是无法继承的,即不存在 React.extend 之类的方法可以定义一个子类。React推崇通过组合的方式来组织大规模的应用。所以所谓父子组件,就和DOM中的父子元素一样,他们是有从属关系,但没有继承关系。比如:[javascript] view plain copyvar Team转载 2016-12-08 15:25:39 · 427 阅读 · 0 评论 -
react+webpack+webstorm开发环境搭建
需要安装的软件node.jsnpm包管理以上两个包的下载地址如下:https://nodejs.org/dist/v6.3.0/node-v6.3.0.pkg由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm更换npm库的源由于国内的网络原因,推荐只用阿里的npm源地址npm config set registry https://转载 2016-12-08 15:28:07 · 3823 阅读 · 0 评论 -
React中如何使用refs
ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示:[html] view plain copy print?body> script type="text/jsx"> var App = React.crea原创 2016-12-08 15:30:40 · 3574 阅读 · 0 评论 -
React常用插件介绍:React中我们为什么要用 redux-thunk,它能做什么?
redux-thunk 是一个比较流行的 redux 异步 action 中间件,比如 action 中有 setTimeout 或者通过 fetch 通用远程 API 这些场景,那么久应该使用 redux-thunk 了。redux-thunk 帮助你统一了异步和同步 action 的调用方式,把异步过程放在 action 级别解决,对 component 没有影响。下面通过例子一步步来看转载 2016-12-08 15:35:50 · 12277 阅读 · 4 评论 -
Redux 莞式教程
Redux 简明教程原文链接(保持更新):https://github.com/kenberkeley/redux-simple-tutorial写在前面本教程深入浅出,配套 简明教程、进阶教程(源码精读)以及文档注释丰满的 Demo 等一条龙服务§ 为什么要用 Redux当然还有 Flux、Reflux、Mobx 等状态管理库可供选择抛开需转载 2017-02-04 16:52:01 · 1120 阅读 · 0 评论 -
Redux 进阶教程
原文(保持更新):https://github.com/kenberkeley/redux-simple-tutorial/blob/master/redux-advanced-tutorial.md写在前面相信您已经看过 Redux 简明教程,本教程是简明教程的实战化版本,伴随源码分析Redux 用的是 ES6 编写,看到有疑惑的地方的,可以复制粘贴到这里在线编译 ES5转载 2017-02-04 17:51:24 · 497 阅读 · 0 评论 -
React深入源码--了解Redux用法之Provider
在Redux中最核心的自然是组件,以及组件相关的事件与数据流方式。但是我们在Redux中并没有采用传统的方式在getInitialState()中去初始化数据,而是采用Provider统一处理,省去了开发者不少工作,但是Redux到底如何将state中的数据传递给各组件的呢?还得看看Provider的源。1.常用数据传递写法在ReactJS中的数据传递一般采用state转载 2017-02-08 15:54:27 · 1718 阅读 · 0 评论 -
React脚手架的使用--5步生成React+ES6+Webpack项目
转载自:http://blog.csdn.net/adzcsx2一、安装最新的node.js原博文是这样写说的npm install -g n //首先安装n模块 n stable //升级Node.js到最新稳定版 n 5.0.0 //或者指定版本升级 node -v //检查更新是否成功我自己是去重新下了一个最新版的node.js二、修改np转载 2017-02-20 17:40:59 · 617 阅读 · 0 评论 -
如何有效地提高react渲染效率--深复制,浅复制,immutable原理
1. 性能意义:保持state不变这个约束引导我们使用局部更新对象的方法,这样会可以非常有效地提高react或其他显示框架的渲染效率。我们先来看看为了保持数据不变性,要怎么对state做更新,以我们的苹果篮子state为例:例子:通知开始摘苹果:apple/BEGIN_PICK_APPLE为了保证每个版本的state不变性,我们有两种实现方式:“深复制”,“浅复制”。我们来看两种模原创 2017-03-10 13:06:32 · 5137 阅读 · 0 评论 -
redux router 组件如何按需加载
当页面比较多时,项目就会变得越来越大,尤其对于单页面应用来说,初次渲染的速度就会很慢,这时候就需要按需加载,只有切换到页面的时候才去加载对应的js文件。react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFilename。const chooseProd原创 2017-03-07 14:03:35 · 1495 阅读 · 1 评论 -
ReactJS如何DOM操作?
一 获取DOM元素react可以允许我们通过 ref 来定位一个组件。具体的做法是:先给一个组件设置一个 ref=‘xxx’ 的属性,注意这个ref必须是全局唯一的。然后就可以通过 this.refs.city 来访问这个组件。但是请注意,这里拿到的只是虚拟DOM,而不是真实的DOM。只有在render方法执行之后,并且react已经完成了D原创 2016-12-08 15:21:35 · 4699 阅读 · 0 评论 -
WebStorm开发工具设置React Native代码智能提醒
在做React Native开发时,最常用的开发工具有 webStorm ,sublime ,appcode等,很多人都希望开发工具有智能提醒功能,然而我们使用上述开发工具进行React Native开发时并没有较好的提示功能。今天给大家介绍一款插件Webstrom live template 使webStrom支持React Native开发智能提醒。下面进入正题插件下载地址https:/原创 2016-12-08 15:19:01 · 2350 阅读 · 0 评论 -
react -redux之provider作用小析
Provider 是 react-redux 库提供的,redux 本身并不强制依赖它,然而问题是 redux 本身也不依赖 react。作为一个纯粹的 data layer,redux 并不关心你用什么视图引擎,所以如何访问 store 是你自己需要考虑的事情,redux 并不会约束你一定要怎么做。react-redux 是官方提供的解决方案,Provider 本身并没有做很多事情,只是原创 2016-12-06 13:51:07 · 6506 阅读 · 0 评论 -
React和Redux的连接react-redux
React和Redux的连接react-redux之前一直在探索React相关的东西,手上有个SPA项目,于是准备上Redux试试水。Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理。要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react转载 2016-12-06 14:12:55 · 289 阅读 · 0 评论 -
React组件之间的通信
组件之间的通信react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。组件层级嵌套到比较深,可以使用上下文Context来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.co原创 2016-12-06 19:11:18 · 1013 阅读 · 0 评论 -
react-redux提供了connect和Provider有什么作用?
先简单说一下redux和react是怎么配合的。react-redux提供了connect和Provider两个好基友,它们一个将组件与redux关联起来,一个将store传给组件。组件通过dispatch发出action,store根据action的type属性调用对应的reducer并传入state和这个action,reducer对state进行处理并返回一个新的state放入store,c原创 2016-12-06 19:14:31 · 3972 阅读 · 1 评论 -
认识redux的store,reducer,action
store是一个对象,它有四个主要的方法:1、dispatch:用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造,比如当action传入dispatch会立即触发reducer,有些时候我们不希望它立即触发,而是等待异步操作完成之后再触发,这时候用redux-thunk对dispatch进行改造,以前只能传入一个对象,改原创 2016-12-06 19:24:03 · 2540 阅读 · 0 评论 -
react-redux的工作流程理解
react-redux的工作流程理解如果只使用redux,那么流程是这样的:component --> dispatch(action) --> reducer --> subscribe --> getState --> component用了react-redux之后流程是这样的:component --> actionCreator(data) --> r原创 2016-12-06 19:30:36 · 5469 阅读 · 0 评论 -
react项目搭建
react项目搭建上面说了react,react-router和redux的知识点。但是怎么样将它们整合起来,搭建一个完整的项目。1、先引用 react.js,redux,react-router 等基本文件,建议用npm安装,直接在文件中引用。2、从 react.js,redux,react-router 中引入所需要的对象和方法。import React, {C原创 2016-12-06 20:07:10 · 742 阅读 · 0 评论 -
总结react中遇到的坑和一些小的知识点
总结react中遇到的坑和一些小的知识点在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点。1、setState()是异步的this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的。所以执行this.set转载 2016-12-06 20:08:05 · 5199 阅读 · 0 评论 -
浅谈redux 中间件的原理
浅谈redux 中间件的原理在使用redux管理异步数据流的时候,我们会使用中间件,以redux-thunk中间件为例,我们做一下分析:首先是构建store,我们需要以下代码进行揉入中间件的类似creatStore函数的构造:const loggerMiddleware = createLogger();const createStoreWithMiddle转载 2016-12-08 13:57:08 · 414 阅读 · 0 评论 -
react之prop验证代码实例
Prop 验证随着应用不断变大,保证组件被正确使用变得非常有用。为此我们引入 propTypes 。 React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 propTypes 。下面用例子来说明不同验证器的区别:React.crea原创 2016-12-08 15:14:54 · 490 阅读 · 0 评论 -
react组件之间的通信
react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。组件层级嵌套到比较深,可以使用上下文getChildContext来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.conte原创 2017-03-07 14:16:12 · 893 阅读 · 0 评论