上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道react本身是个状态机,也就是说组件是state的表现形式.那么redux提供了一个全局的唯一的状态树,是不是就不需要组件本身的state了呢? 当然不是! 有图为证,这是官方的todomvc的例子(https://github.com/lewis617/react-redux-tutorial/t…

前言 距离上次我写 React 入门教程已经快2个月了,年头年尾总是比较忙哈,在React 入门教程(一)我大概介绍了 React 的使用和一些注意事项,这次让我们来继续学习 React 一. React 解决了什么? 前端有很多框架和库,但是他们很多都是解决类似的问题,而我们去学习一个框架或者库,就应该对学习的库或者框架解决的问题深入了解和去思考,这样对新的库和框架也不会太过于迷茫,因为大家解决的都是类似的问题. 而 React 解决的就是View层的问题,他帮助我们把界面分成各个独立的块,这…

今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一(延迟一秒). 源代码:https://github.com/lewis617/react-redux-tutorial/tree/master/redux-examples/counter 组件 components/Counter.js import React, { Component, Pro…

Redux 有三个基本的原则: 1,单一状态树,redux 只使用一个javascript 对象来保存整个应用的状态. 状态树样式如下: const state = { count: 0 } 2,状态是只读的,它的意思不是说不能修改state,如果不能修改状态,那页面就完成静态化了,没有什么作用了,它想表达的是,我们不能直接修改state.修改state的唯一办法是发送一个action,让action 来告诉Redux,  页面上有事情发生了,action也很简单,就是一个JavaScript…

ReactDOM findeDOMNode 语法:DOMElement findDOMNode(ReactComponent component)描述:获取改组件实例相对应的DOM节点 案例: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { componentDidMount() { const dom = ReactDOM.find…

前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的前端架构,我将尽量以最简单的语言描述,如果有童鞋看不懂,也可以私下问我. 复习 前一节我们已经知道,一个redux应用,主要有几个概念,它们的共同作用都是管理一个全局state,使react组件的state集中处理,想一下你在写react组件的时候,组件的state总是或多或少与父级组件有关联,一般…

今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换react和frontend关键词来切换新闻列表,可以刷新当前新闻列表. 源代码: https://github.com/lewis617/react-redux-tutorial/tree/master/redux-examples/async 异步 异步本身 这个概念,本文不详细叙述,但可以简单说一下,…

上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo的官方示例代码来学习,在redux中使用撤销功能.devtools功能.以及router. 例子 这个例子是个计数器程序,包含计数器.右边的redux开发工具.还有一个路由(不过只有“/”这一个地址). 源代码: https://github.com/lewis617/react-redux-tut…

通过前面的教程,我们有了简单的环境,并且可以运行Redux的程序,也对 如何编写Redux示例 有了初步的印象: 掌握了 使用Redux控制状态转移 ,继而驱动 React 组件发生改变,这才是学习Redux的初衷. 本篇我们将 Redux 和 React 联合起来,着重讲解redux-react模块的使用: 1.编写红绿灯React组件 在原有的基础上,我们编写红绿灯组件: touch components/light/index.js components/light/index.less…

概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录 |-- actions.js |-- index.js |-- reducers.js |-- state.…