漫漫填坑路，十里长安响码声。

0

Router入门0x203: react、react-route、react-route-dom

• followWinter   2018-10-08 发布
• 收藏

0x000 概述 上一章使用的是自己实现的route，当然已经有现成的库给我们用了，那就是react-route。 0x001 history Api说明 在说这个库之前，得先对history新的api做一个了解 window.history.pushState(data,title,...

0

Router入门0x202: 自己实现 Router 页面调度和特定页面访问

• followWinter   2018-09-28 发布
• 收藏

回顾一下上一章讲的页面切换，我们通过LeactDom.render(new ArticlePage(),document.getElementById('app'))来切换页面，的确做到了列表页和详情页的切换，但是我们可以看到，浏览器的网址始终没有变化，是http:/...

0

Router入门0x201: 从 URL 到 SPA

• followWinter   2018-09-21 发布
• 收藏

从这一章开始就进入路由章节了，并不直接从如何使用react-route来讲，而是从路由的概念和实现来讲，达到知道路由的本质，而不是只知道如何使用react-route库的目的，毕竟react-route只是一个库，是路由的一个实现...

0

Redux入门0x107: `react`集成`redux`精讲

• followWinter   2018-09-20 发布
• 收藏

0x000 概述 前面虽然简单的讲了如何在react中集成redux，但是那只是简单的讲讲而已，这一章将会仔细讲讲如何在react中使用reudx 0x001 问题分析 查看前边的栗子： {代码...} 为了让组件可以响应redux的变化，我们...

0

Redux入门0x106: `react`、`vue`、`原生 js`集成`redux`

• followWinter   2018-09-20 发布
• 收藏

之前写的所有关于redux的文章都是纯粹的redux，是和框架无关、环境无关的redux，所以我没有将redux和react一起讲，为的是吧redux和react分开，作为独立的个体来分析，redux提现的是一种思想，而不是一个思维定式...

0

Redux入门0x105: redux 中间件

• followWinter   2018-09-20 发布
• 收藏

在项目中，我们经常会有记录一些事件或者在某些事件发生的时候做某些事的需求，比如api接口鉴权操作、日志记录操作等，一般我们都可以用中间件来完成，中间件具有可拔插、可扩展的特点。我们也可以使用中间件来扩...

0

Redux入门0x104: Action Creators

• followWinter   2018-09-18 发布
• 收藏

其实很多框架在技术上没有太大的难度，真正难的是思想，思想的突破远远比技术突破难多了。redux就为我带来了一种应用状态管理的新思想，其间充斥着许多个概念，state、reduce等，乍一看头大，等到仔细理解了它的...

1

Redux入门0x103: 拆分多个 reducer

• followWinter   2018-09-04 发布
• 收藏

就是这么简单了，核心函数是：combineReducers(reducers)，将多个reducer并成一个，拆分之后呢，每个reducer单独管理一个state

0

Redux入门0x102: redux 栗子之 counter

• followWinter   2018-09-03 发布
• 收藏

0x000 概述 这一章讲一些栗子 0x001 原生+redux实现counter 修改模板 {代码...} 修改入口文件 {代码...} 查看浏览器 说明：dispatch其实就是发出一个请求，比如store.dispatch({type: ACTION_NUM_INCREMENT})发出...

0

Redux入门0x101: 简介及`redux`简单实现

• followWinter   2018-09-02 发布
• 收藏

这一章开始讲redux，其实是承接前面的react，但其实作为一个框架来说，redux和react并没有太多的关系，本身是独立存在的。在我看来它们的关系不会比共用re开头更深了，所以我就重新开了一个头，但其实是基于前面...

0

React入门0x012: 组件通信

• followWinter   2018-08-31 发布
• 收藏

0x000 概述 这一章讲组件间通信，组件通信分为很多种： 父组件向子组件发起通信 子组件向父组件发起通信 兄弟组件间通讯 远程组件通信 在组件通信中，有一种错误的说法，那就是父组件调用子组件，子组件调用父组...

0

React入门0x011: 样式

• followWinter   2018-08-30 发布
• 收藏

内联样式： 内联样式可以写在标签的style属性中 我们先尝试传统写法 {代码...} 查看浏览器，会发现报错，因为style期待的是一个像{background:'red'}一样键值对对象 修改写法： {代码...} 查看浏览器，可以了那为...

0

React入门0x010: 表单

• followWinter   2018-08-29 发布
• 收藏

如果你只给input绑定了value，会发现无法输入任何内容，因为在react中，有受控组件的说法，有点不大好理解，直接换种说法比较好，在form表单中我们需要完成数据的双向绑定。如果你只给input绑定了value，那么stat...

0

React入门0x009: 事件处理

• followWinter   2018-08-28 发布
• 收藏

0x000 概述 上一章讲咯生命周期，这一章就是事件处理咯 0x001 事件绑定 {代码...} {代码...} 0x002 解决函数绑定的this问题 上面的栗子有个问题：在handleClick内无法访问App内的资源，比如this.state {代码...} ...

0

React入门0x008: 生命周期

• followWinter   2018-08-27 发布
• 收藏

上一章说明了生命周期的概念，本质上就是框架在操作组件的过程中暴露出来的一系列钩子，我们可以选择我们需要的钩子，完成我们自己的业务，以下讲的是react v16.3以下的生命周期，v16.3以及以上的版本有所不同

0

React入门0x007: 生命周期概念

• followWinter   2018-08-26 发布
• 收藏

0x000 概述 上一章只是稍微了解了一下state和setState相关的简单用法，这一章需要讲一下组件的生命周期。 0x001 生命周期的概念 这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。大凡事物...

0

React入门0x006: State

• followWinter   2018-08-26 发布
• 收藏

0x000 概述 这一章讲state，state是MVVM的核心，也算是React的核心思想......都很核心啊。 0x001 问题 在上一章节的栗子中，我们取出一个栗子稍作修改： {代码...} 查看浏览器： 已经知道了如何渲染数据，但是怎...

0

React入门0x005: React Component和props

• followWinter   2018-08-24 发布
• 收藏

0x000 概述 这一章讲组件，组件才是React的核心，也是React构建的项目中最小的单元。 0x001 组件 上面的章节有一个类似下面的栗子： {代码...} 查看浏览器 我们可以给他参数 {代码...} 查看浏览器 由此，我们可以...

0

React入门0x004：jsx 和数据渲染

• followWinter   2018-08-23 发布
• 收藏

0x000 概述 在React中，渲染数据的形式有多种多样，但是万变不离其中，都是用js。 0x001 渲染文本 {代码...} 使用babel转义：babel --plugins transform-react-jsx index.js {代码...} 查看浏览器 0x002 渲染数字...

0

React入门0x003：jsx 和自由的组件

• followWinter   2018-08-22 发布
• 收藏

说起来react，我喜欢的还是他的思想，在react中，实际上没有html、css、js的区别，全部都是js，就和webpack一样，可以将所有的资源等同视之。但是这在一开始，就让很多人感觉很难受，毕竟在这之前，我们看过的大...