分类React下的文章

admin 发布于 04月03, 2017

React + Rx 模仿 Angular 模式

一、前言

其实对于软件开发模式来说,Angular 有着整套的一条龙服务,而 React 只是单纯的解决 View 层的问题,如果只是使用 React 开发项目会或多或少有点麻烦。下面主要讨论下数据层的东西,之前出了一个 mobx 来解决这个问题,但是这里想换个思路套用一下。其实 mobx 主要是声明了 @action, @computed, @observable 等元素来做到将 Store 作为一个可监控的源头,自动做到 VM 的效果,下面我也是,不过我采用 Rx 来做这个事情,简单利用下这种思想,能不能不污染我的原始数据(因为如果是双向的一种数据结构,那么就会被包装成监听类型的数据结构),这样我们调试的时候依然看到的是清晰的数据,并且还可以解决最初 Flux 库的一些麻烦,经过 Rx 改造的结果,可能比 mobx 的可测试性更好一些,具体就不说了,先谈 DEMO。

如果不想看文章的可以直接看代码 GitHub

阅读全文 »

admin 发布于 10月16, 2016

如何存储 React 组件的数据

主要讲解这几个部分:state、store、static、this、module-global data

前言

随着 React 和 Redux 的到来,一个共同的问题被问到:

我应该将数据保存在 Redux Store 中呢?还是应该保存成本地 state?

其实这个问题是说的不完整( 或者原文说的太简单 ),因为你能在组件中存储数据的方式还有两种:static 和 this.(其实就是静态数据,还是类的实例数据)

让我们来依次讨论一下,你应该在什么时候使用它们。

阅读全文 »

admin 发布于 07月26, 2016

Mac OS X 10.9配置AMP环境

2016年9月27日更新

MySQL 5.7 更新密码的方式修改(以前的 password 字段不存在,修改为 authentication_string

遇到的错误提示:

ERROR 1054 (42S22): Unknown column 'password' in 'field list'

解决的办法:

update user set authentication_string=password("小撸") where user="root";
flush privileges;

2015年5月9日更新

更新内容:针对Mac OS X 10.10.3不能访问用户目录

http://localhost/~lulin

检查Apache版本是否升级

Server version: Apache/2.4.10 (Unix)
Server built:   Jan  8 2015 20:48:33

修改的地方有以下 3 点:

阅读全文 »

admin 发布于 07月26, 2016

React.js 模式

前言

我想找一个好的前端前端框架,找了很久。这个框架将能够帮助我写出具有可扩展性、可维护性 UI 的代码。通过对 React.js 优势的理解,我认为“我找到了它”。在我大量的使用过程中,我发现了一些模式性的东西。这些技术被一次又一次的用于编程开发之中。此时,我将它写下来、讨论和分享这些我发现的模式。

这些所有的代码都是可用的,能够在 https://github.com/krasimir/react-in-patterns 中下载。我可能不会更新我的博客,但是我将一直在 GitHub 中发布一些东西。我也将鼓励你在 GitHub 中讨论这些模式,通过 issue 或者直接 pull request 的方式。

阅读全文 »

admin 发布于 07月26, 2016

React 组件之间如何交流

前言

今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可能用中文的意思,来将作者要讲述的技术描述清楚。英文能力有限,如果有不对的地方请跟我留言,一定修改……^_^

原著序

处理 React 组件之间的交流方式,主要取决于组件之间的关系,然而这些关系的约定人就是你。

我不会讲太多关于 data-stores、data-adapters 或者 data-helpers 之类的话题。我下面只专注于 React 组件本身的交流方式的讲解。

React 组件之间交流的方式,可以分为以下 3 种:

  • 【父组件】向【子组件】传值;
  • 【子组件】向【父组件】传值;
  • 没有任何嵌套关系的组件之间传值(PS:比如:兄弟组件之间传值)

阅读全文 »

admin 发布于 07月26, 2016

Redux 能做什么?

一、我先给一个 Redux 的定义

Redux 被大家知道应该都是来自于 React 的出现,但是这篇文章会通过介绍一个 React 之外的例子,来让大家理解 Redux 是什么东西,到底还能够做点撒。

我自己的理解是:

Redux 是一个改变状态(state)的模型,这个模型通过一个单向操作的方式来改变状态,用数学符号的方式来理解我认为应该是:y = f(x),嗯,就是一个最简单的函数模型。

不过这样说,有些人还会不理解,毕竟以前撸代码不是这个样子的,那么我们先反向的来获取自己的理解。

首先,我们需要知道 Redux 有的以下几个东西:

  • createStore
  • reducer
  • dispatch

我觉得需要介绍清楚 Redux ,知道这三个就行了,至于还有一些函数我觉得都是调味料,这里先不介绍。

阅读全文 »

admin 发布于 07月26, 2016

React 组件开发入门

前言

熟悉 React 的思想后,我们先来尝试开发一个单纯的小组件,可以对比一下是不是比以前的开发模式更加舒适了,这里我主要以一个 Loadding 组件来举栗子,实现了几个基本的功能:

  • 一种类型的 loadding(菊花转)
  • 能够设置 loadding 的三个属性:width height color
  • 能够控制 loadding 的显示和隐藏

其实对于一个简单需求来说,这三个属性已经很实用了。但是去网上看一些外国大神写的组件,有一些不明白的地方,所以自己就慢慢搞,do it!

设计

我想这样用 loadding 组件:

使用代码

阅读全文 »

admin 发布于 07月26, 2016

CSS字体单位

一、前言

在CSS样式中,当文本缩放的时候使用font-size属性是最难以理解的方面之一。在CSS中,你有4种不同的选择,能够让你设置文本在浏览器中的展示。那么这4种单位哪一种更适合呢?这个问题引发了各种各样不同的争论和评价。想要找到一个比较权威的回答可能比较困难,因为这个问题比较难回答。

PS: 半年前只翻译啦一半,半夜打开一看原文突然就想把剩下的翻译啦~里面有一些自己的观点描述,如果有错误请您留言给我,一定修正。

阅读全文 »