React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的运行机制: React-Redux将组件划分为两类,第一类是UI组件: 只负责 UI 的呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux 的 API 比如,我们的实例计数器就是一个UI组件,我们只写了UI…

React:快速上手(4)——掌握Redux 引入Redux 混乱的state管理 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态). 这些 state 可能包括服务器响应.缓存数据.本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等. 管理大量的state并不容易,当系统变得错综复杂的时候,想重现问题或者添加新功能变得举步维艰. Redux试图让state的变化…

React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: store.dispatch({ type: 'INCREMENT' }) 但是,在使用redux-thunk中间件后,我们就可以传递一个函数进去 import { createStore, applyMiddleware } from 'redux' import thunk from 'red…

此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的.用于快速构建开发环境的脚手架工具 create-react-app. 当然,如果你需要 React Native 的脚手架项目,可以查看这里:create-react-native-app 使用的原因以及特性: 无需配置: 集成了对 React, JSX, ES6 和 Flow 的…

React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由器组件.路由匹配组件和导航组件. 路由器组件:Router 每个React Router应用程序的核心应该是路由器组件.对于Web项目,react-router-dom提供了两种类型的路由器: <BrowserRouter> <HashRouter> 一般来说,如果您有响应请求的服务器…

React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能. 详情查看菜鸟教程了解更多:http://www.runoob.com/w3cnote…

React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父组件及时获取到输入框内容然后更新右边标签. 父组件传递回调函数 父组件传递一个方法,即updateSpan,用于更新span内容. class Father extends React.Component{ constructor(props){ super(props) this.state =…

React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1.关于JSX JSX(JavaScript XML)是JavaScript语言语法的扩展.与HTML相似,JSX提供了一种使用许多开发人员熟悉的语法来构建组件呈现的方法. React组件通常使用JSX编写,组件也可以用纯JavaScript编写,只是太麻烦. 例如,我们使用JSX可以很轻松的描述一个视…

React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www.google.com 的资源.跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域. 如下,域名相同的情况下,3000端口的应用无法直接访问8080端口的服务. 跨域资源共享CORS 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同…

前提: 下载依赖,配置 cnpm i babel-preset-react -D JSX语法的本质: 还是以 React.createElement 的形式来实现的,并没有直接把 用户写的 HTML代码,渲染到页面上: 语法: 1.如果要在 JSX 语法内部,书写 JS 代码了,那么,所有的JS代码,必须写到 {} 内部. 2.当 编译引擎,在编译JSX代码的时候,如果遇到了`<`那么就把它当作 HTML代码去编译,如果遇到了 `{}` 就把 花括号内部的代码当作 普通JS代码去编译. 3.在{…