标签React下的文章

admin 发布于 10月16, 2016

如何存储 React 组件的数据

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

前言

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

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

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

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

阅读全文 »

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 的代码,代码可能到 Github 上随意下载然后阅读理解,但是有些说词类的东西还是需要看的,这样能够更好的去理解一个东西。好吧,下面大致“翻译”了一下 《Pro React》这本书的 React‘s Benefits 的部分。^0^ 英文不太好,如果有不一样的地方能理解就好,毕竟不是专业翻译~

(1)让响应式的渲染变得简单

在以前的 Web 开发过程中,也就是在单页应用之前,在用户每一次浏览页面的时候(比如点击一个按钮),都将重新请求一次服务端,即使是页面上一个很小的状态的改变。这是一种糟糕的用户体验,但是在这种多页的情况下,开发者很容易掌控用户访问的页面。

在单页应用的交互中,用户是通过不断的从服务端获取新的数据,然后切换 DOM 的状态。但是随着系统的发展,Web 系统将变得越来越复杂,它将更加难以确定当前应用的状态(其实这里是指局部受影响的部分),以及很难准时的去更新当前交互中的 DOM 状态。

在 React 出现之前,有很多 JavaScript 的框架去解决以上说到的这个问题,然而,这些解决方案都有一些缺陷,比如系统的“可维护性”、“可扩展性”以及“性能”。(其实这里也不尽然,Angular 1.x 也是很优秀的,在此之前)

阅读全文 »

admin 发布于 07月26, 2016

React 组件之间如何交流

前言

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

原著序

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

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

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

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

阅读全文 »

admin 发布于 07月26, 2016

React 组件开发入门

前言

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

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

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

设计

我想这样用 loadding 组件:

使用代码

阅读全文 »