文档章节

【天赢金创】Reflux学习指南

第三方支付接口
 第三方支付接口
发布于 2015/09/23 13:36
字数 1022
阅读 90
收藏 0

这个是 simple Todo with React and2 的第二部 - Reflux

第一部可以看 simple Todo with React and Flux1 也可以看 学习flux的一些浅显理解2

Reflux 相对 Flux 来说,真的是简单很多,好理解很多。官方API2 和很多开发者的分享也都说得很明白了。所以我就简单讲讲我的理解

How Reflux Works

Reflux 给我们封装了一些方法和属性,可以让我们的数据和操作可以在 Actions Stores Components 之间单向流动,不再需要 Dispatcher

  • 用 Reflux.createStore() 方法创建的 Store 可以添加一个 listenables 的属性,只要把我们的 Actions 放在里面,当我们执行 Actions 里的行动的时候,就会自动触发 Store 里的 on"Actions" 的方法,就这完成了 Actions -> Stores

  • 而在 Controller View 中,有 Store.listen(fn) 方法,只要 Store 执行了 this.trigger(),就会触发这个在 Controller View 里的 fn 函数,我们就可以在这个 fn 里改变 state 的值, Components 也会随之变化,这就完成了 Stores -> View Components

  • 而在任意的 Components 内直接触发 Actions 的行动,就可以完成 View Components -> Actions

Refactoring React Components to ES6 Classes

所谓的坑,就是从这里开始

从 React 0.13 开始,我们就都可以用 ES6 的语法来写 React 的组件了,具体看这里1,但很多的教程都还是运用 React.createClass() 的方式,当然啦,React.createClass() 也有他的好处,例如 Autobindingmixins 等等,但我觉得用 ES6 写会更优雅,但把原来的改写就有很多坑,所以现在就来一个一个填吧

1. We don't need componentWillMount any more

componentWillMount 这个方法已经不再需要了,我们把渲染组件之前要做的事情放在constructor 里,例如如果我们设置我们的 state,我们可以这样

谢谢 @react1 的指出, componentDidMount 和 componentWillMount 的区别可以在这里看到

class ExampleComponent extends React.Component {
  constructor (props) { super(props); this.state = { // set your state };
  }
}

2. Autobinding and No Autobinding

改用了 ES6 的语法之后,函数的 this 不再是绑定在了自身的实例身上,这里可以有两个方法去解决这个问题

1. use arrow function =>

当你在组件里写的方法是用 arrow function,那么 this 就会自动绑在实例身上,后面调用方法的时候,就可以直接调用了

class ExampleComponent extends React.Component {
  constructor (props) { super(props);
  }
  _handleClick: () => { console.log(this);
  }
  render () { return <div onClick={this._handleClick}>Hello, Reactr!</div>; }
}

2. use bind(this)

还有一种就是利用 bind(this)

// use `bind(this)` when called class ExampleComponent extends React.Component {
  constructor (props) { super(props);
  }
  _handleClick () { console.log(this); // this is an ExampleComponent }
  render () { return <div onClick={this._handleClick.bind(this)}>Hello, Reactr!</div>; }
} // use `bind(this)` in constructor class ExampleComponent extends React.Component {
  constructor (props) { super(props); this._handleClick = this._handleClick.bind(this);
  }
  _handleClick () { console.log(this); // this is an ExampleComponent }
  render () { return <div onClick={this._handleClick}Hello, Reactr!</div>; }
}

3. No Mixins

ES6 不支持 mixins 了,but Mixins Are Dead. Long Live Composition2

Reflux 官方的 TodoApp 有 mixins,那我们怎么来修改他呢

  1. TodoApp 里的 mixins: [Reflux.connect(TodoStores,"list")]

    Reflux.connect 方法主要作用是当 TodoStores 执行 this.toggle() 方法的时候,TodoApp 就会重新setState 来更新数据,所以我们可以用 TodoStores 的 listen 方法来监听,再调用 TodoApp 自身的onStateChange 方法

  2. TodoMain 里的 mixins: [ ReactRouter.State ]

    这个在 react-router 1.0.0 之后就不再有了,UPGRADE_GUIDE2也写得很明白了,只要把 switch 里的getPath() 改成 this.props.location.pathname 就可以了

  3. TodoItem 里的 mixins: [React.addons.LinkedStateMixin]

    这个是用来做 input 数据双向绑定的,不用 mixins 怎么做,React 的官方文档2也写得很清楚

可以对比看看 我的代码1 和 官方的代码

Use React-Router 1.0.0-rc1

npm install react-router@1.0.0-rc1

好像用上面的命令才可以下到 1.0.0 不然直接 npm install react-router 下的还是 0.13 的

Reflux 官方的 TodoApp 用的 react-router 是 0.13 版的,但现在出到 1.0 了,UPGRADE_GUIDE2 也写得很明白了,所以还是用 1.0 的吧

而在这个 TodoApp 中,受到影响的就是 RenderingLinksRouteHandler 和 State mixin

Summary

希望这篇东西可以帮到那些也想用 ES6 写 React,但总是被坑的朋友们,有问题也可以一起多加讨论,共同学习

想看完整代码的可以到 simple-todo-with-react-and-reflux1

如有错误,欢迎指出 smile

本文转载自:http://react-china.org/t/reflux/2719/4

第三方支付接口
粉丝 14
博文 50
码字总数 28661
作品 0
深圳
程序员
私信 提问
加载中

评论(0)

【天赢金创】React flux九浅一深

这个是 Facebook 官方学习 Flux 的 todo 例子 想用这个例子来总结一下怎么从零开始用 React 和 Flux 构建一个 App Structure App├─ javascripts│ ├─ actions│ │ ├─ TodoActions.js...

第三方支付接口
2015/09/23
79
0
【天赢金创】探究Gulp的Stream

来自Gulp的难题 描述Gulp的项目构建过程的代码,并不总是简单易懂的。 比如Gulp的这份recipe: var browserify = require('browserify'); var gulp = require('gulp'); var source = require......

第三方支付接口
2015/09/21
30
0
最近的总结

最近在看react方面的东西。 reflux redux是挺好的,但是写reducer太痛苦了,要复制复制复制,天啊,好痛苦。。。 于是,我换到了reflux,需要迁移代码,但是不难。而且,我还写了一个connect...

m2012
2015/12/21
40
0
【译】解构ReactJS的Flux

用ReactJS时不要使用MVC 我将通过列出一些单向数据流的例子来将ReactJS官方实现的Flux和我写的库Reflux作比较。 Facebook的ReactJS开发小组似乎并不待见MVC框架。将MVC模式和ReactJS结合使用...

leozdgao
2015/06/08
0
0
React+Redux系列教程

参考项目:https://github.com/lewis617/react-redux-tutorial 参考项目下载地址:https://github.com/lewis617/react-redux-tutorial.git React+Redux系列教程 react+redux教程(一)conne......

王春-海子
2016/08/20
183
0

没有更多内容

加载失败,请刷新页面

加载更多

为容器设置启动时要执行的命令及其入参

本页将展示如何为 Pod 中的容器设置启动时要执行的命令及其入参。 准备开始 创建 Pod 时设置命令及入参 使用环境变量来设置入参 通过 shell 来执行命令 注意 接下来 准备开始 你必须拥有一个...

xiaomin0322
18分钟前
24
0
自动化部署工具syncd

一.部署安装 (一)常用安装方式 1. curl https://syncd.cc/install.sh | bash 2. dockerfile安装方式正在测试中 (二)安装参考文档 1.https://syncd.cc/docs/#/install 2.https://github....

浮世清欢-千帆
23分钟前
30
0
如何学习嵌入式?(网上汇总)

如何学习嵌入式?汇总了网上的一些帖子,最后部分给出了一些资源的下载链接 嵌入式菜鸟学习路线,2019, https://zhuanlan.zhihu.com/p/68227075 嵌入式小白到大神学习全攻略(学习路线+课程...

sentuate
24分钟前
23
0
工欲善其事,必先利其器——DevOps中如何管理工具包

一、背景 作为DevOps交付流水线的开发者,为支持CI/CD中各项任务的自动化,都需要依赖多种包管理工具来下载各种相关的工具,比如针对产生最终交付件的构建过程,就需要在构建流程的第一步,自...

JFrog杰蛙
24分钟前
22
0
深度探索JFR - JFR详细介绍与生产问题定位落地 - 2. 通过一个线上调优例子了解JMC 与 Event 结构与详细配置

查看 JFR 事件的工具 - JMC (Java Mission Control) 官网地址:https://adoptopenjdk.net/jmc.html 国内下载起来比较慢,建议在aws上面建一个欧洲法兰克福的实例,在这个实例上先下载好,然...

zhxhash
26分钟前
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部