前言

 本文是学习Thinking in React这一章后的记录,并且用Reagent实现其中的示例。

概要

  1. 构造恰当的数据结构
  2. 从静态非交互版本开始
  3. 追加交互代码

一、构造恰当的数据结构

Since you’re often displaying a JSON data model to a user, you’ll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely.

 VDom让我们可以将Model到View的映射交出,而更专注于数据和数据结构本身,即是折腾数据和数据结构才是我们的主要工作。因此我们要设计出与View中组件结构对应的数据结构,然后将不符合该数据结构的数据做一系列转换,然后将数据交给React就好了。

 居上所述那么可以知道,数据结构就依赖View的结构,那么如何设计View的结构呢?是采用Top-down还是Bottom-up的方式呢?对于小型应用我们直接采用Top-down即可,对于大型应用则采用Bottom-up更合适。(根据过往经验将大规模的问题域拆分成多个小规模的问题域,然后对小问题域采用Top-down方式,若无法直接采用Top-down方式则继续拆分,然后将多个小问题域的值域组合即可得到大问题域的值域)

 无论是Top-down还是Bottom-up方式,都要将View构建为树结构(这很符合DOM结构嘛)。因此得到如下结构

FilterableProductTable
|_SearchBar
|_ProductTable
|_ProductCategoryRow
|_ProductRow

 而数据则从顶层View组件往下流动,各层提取各自数据进行渲染。

二、从静态非交互版本开始

It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing.

 从设计(他人或自己)那得到设计稿或HTML模板,我们就可以开始着手重构模板、添加交互效果和填充业务逻辑和服务端交互等功能了。且慢,我们先不着急动手,而是要先分清工作步骤,才能有条不紊地包质保量工作哦!

  1. 目标:得到符合React规范的View结构
  2. 目标:得到最低标准的可交互的React应用
  3. 目标:补充业务逻辑,细化交互
  4. 目标:连接远程数据源,细化交互
(ns demo.core
(:require [reagent.core :as re]) (def products [
{:category "Sporting Goods", :price "$49.99", :stocked true, :name "Football"}
{:category "Sporting Goods", :price "$9.99", :stocked true, :name "Baseball"}
{:category "Sporting Goods", :price "$29.99", :stocked false, :name "Basketball"}
{:category "Electronics", :price "$99.99", :stocked true, :name "iPod Touch"}
{:category "Electronics", :price "$399.99", :stocked false, :name "iPhone 5"}
{:category "Electronics", :price "$199.99", :stocked true, :name "Nexus 7"}
]) (declare <filterable-product-table>
<search-bar>
<product-table>
<product-category-row>
<product-row>) (declare get-rows) (defn <filterable-product-table>
[products]
[:div
[<search-bar>]
[<product-table> products]]) (defn <search-bar>
[]
[:form
[:input {:placeholder "Search..."}]
[:input {:type "checkbox"}]
"Only show products in stock."]) (defn <product-table>
[products]
[:table
[:thead
[:tr
[:th "Name"]
[:th "Price"]]]
[:tbody
(get-rows products)]]) (defn assemble-rows
[products]
(reduce
(fn [{:keys [cate] :as rows-info} product]
(let [curr-cate (:category product)
curr-rows (if (not= curr-cate cate)
(list ^{:key curr-cate}[<product-category-row> curr-cate])
(list))
rows (cons ^{:key (:name product)} [<product-row> product] curr-rows)]
(-> rows-info
(assoc :cate curr-cate) ;; 更新cate值
(update
:rows
(fn [o rows]
(concat rows o))
rows)))) ;; 更新rows值
{:cate nil :rows '()}
products)) (defn get-rows
[products]
(-> (assemble-rows products)
:rows
reverse)) (defn <product-category-row>
[cate]
[:tr
[:td {:colSpan 2} cate]]) (defn <product-row>
[product]
[:tr
[:td (when (:stocked product) {:style {:color "red"}})
(:name product)]
[:td (:price product)]])



 这一步我们并没有提供交互功能,因此只会用到prop传递数据,绝对不会用到state的。而交互的意思是,对View的操作会影响应用数据,从而刷新View。

三、追加交互代码

 交互实质上就是触发View状态变化,那么就必须提供一种容器来暂存当前View的状态,而这个在React就是state了。

(ns demo.core
(:require [reagent.core :as re]) (def products [
{:category "Sporting Goods", :price "$49.99", :stocked true, :name "Football"}
{:category "Sporting Goods", :price "$9.99", :stocked true, :name "Baseball"}
{:category "Sporting Goods", :price "$29.99", :stocked false, :name "Basketball"}
{:category "Electronics", :price "$99.99", :stocked true, :name "iPod Touch"}
{:category "Electronics", :price "$399.99", :stocked false, :name "iPhone 5"}
{:category "Electronics", :price "$199.99", :stocked true, :name "Nexus 7"}
]) (declare <filterable-product-table>
<search-bar>
<product-table>
<product-category-row>
<product-row>) (declare get-rows
validate-product) (defn <filterable-product-table>
[products]
(let [search-text (re/atom "")
stocked? (re/atom false)
on-search-text-change #(reset! search-text (.. % -target -value))
on-stocked?-change #(reset! stocked? (.. % -target -checked))]
(fn []
[:div
[<search-bar> on-search-text-change on-stocked?-change]
[<product-table> (filter (partial validate-product @search-text @stocked?) products)]]))) (defn validate-product
[search-text stocked? product]
(and (if stocked? (:stocked product) true)
(as-> search-text %
(re-pattern (str "(?i)" %))
(re-find % (:name product))))) (defn <search-bar>
[on-search-text-change on-stocked?-change]
[:form
[:input {:placeholder "Search..."
:onChange on-search-text-change}]
[:input {:type "checkbox"
:onChange on-stocked?-change}]
"Only show products in stock."]) (defn <product-table>
[products]
[:table
[:thead
[:tr
[:th "Name"]
[:th "Price"]]]
[:tbody
(get-rows products)]]) (defn assemble-rows
[products]
(reduce
(fn [{:keys [cate] :as rows-info} product]
(let [curr-cate (:category product)
curr-rows (if (not= curr-cate cate)
(list ^{:key curr-cate}[<product-category-row> curr-cate])
(list))
rows (cons ^{:key (:name product)} [<product-row> product] curr-rows)]
(-> rows-info
(assoc :cate curr-cate) ;; 更新cate值
(update
:rows
(fn [o rows]
(concat rows o))
rows)))) ;; 更新rows值
{:cate nil :rows '()}
products)) (defn get-rows
[products]
(-> (assemble-rows products)
:rows
reverse)) (defn <product-category-row>
[cate]
[:tr
[:td {:colSpan 2} cate]]) (defn <product-row>
[product]
[:tr
[:td (when (:stocked product) {:style {:color "red"}})
(:name product)]
[:td (:price product)]])

注意:reagent中使用state时,需要定义一个返回函数的高阶函数来实现。

(defn <statefull-cmp> [data]
(let [local-state (re/atom nil)
on-change #(reset! local-state (.. % -target -value))]
(fn []
[:div
[:input {:onChange on-change}]
[:span @local-state]]))) (re/render [<statefull-cmp> 1]
(.querySelector js/document "#app"))

总结

 尊重原创,转载请注明转自:http://www.cnblogs.com/fsjohnhuang/p/7692956.html _肥仔John

参考

https://reactjs.org/docs/thinking-in-react.html

Thinking in React Implemented by Reagent的更多相关文章

  1. react与jQuery对比,有空的时候再翻译一下

    参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...

  2. [转] React Native Navigator — Navigating Like A Pro in React Native

    There is a lot you can do with the React Native Navigator. Here, I will try to go over a few example ...

  3. React源码解析:ReactElement

    ReactElement算是React源码中比较简单的部分了,直接看源码: var ReactElement = function(type, key, ref, self, source, owne ...

  4. react 插槽(Portals)

    前言: 昨天刚看了插槽,以为可以解决我工作中遇到的问题,非常激动,我今天又仔细想了想,发现并不能解决... 不过还是记录一下插槽吧,加深印象,嗯,就酱. 插槽作用: 插槽即:ReactDOM.crea ...

  5. 关于clojurescript+phantomjs+react的一些探索

    这两天需要使用phantomjs+react生成些图片 React->Clojurescript: 最开始发现clojurescript中包裹react的还挺多: https://github. ...

  6. React高级指南

    高级指南 1.深入JSX: 从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖. 因为 JSX 被编译为 ...

  7. react解析markdown文件

    当当当又get到了一个新技能,使用react-markdown来直接解析markdown文件(咳咳,小菜鸟的自娱自乐) 项目中遇到了一个API的那种展示方式,类似于入门手册啥的那种,如果是一个个调用接 ...

  8. Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native

    Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...

  9. React源码 ReactElement

    我们的JSX里面标签,属性,内容都会传递到React.createElement()这个方法里面.那么这个方法他到底有什么意义以及他的返回,我们叫他ReactElement.他到底有什么样的作用 /* ...

随机推荐

  1. 团队作业8——Beta 阶段冲刺4th day

    团队作业8--Beta 阶段冲刺4rd day 一.当天站立式会议   二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 添加了支付功能,并且对支付功能进行了测试 (2)今天计划完成的工作(具 ...

  2. 201521123082 《Java程序设计》第7周学习总结

    201521123082 <Java程序设计>第7周学习总结 标签(空格分隔): Java 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ...

  3. 团队作业8——Beta项目(冲刺计划)

    Beta阶段冲刺计划 经过几周的努力我们完成了Alpha的开发,进过一段时间的调整与重组我们继续向Beta版进发. 1. 新成员介绍 林乔桦(201421123074):掌握c语言,JavaScrip ...

  4. Mac/Windows开发跨平台.NET Core 控制台程序

    自从微软开始在Github上开源搞.NET Core后,.NET的跨平台逐渐就成真了.多年使用各种语言,说实话还是csharp用起来最舒服.不过现在的工作环境里使用它的机会比较少,大部分时候只是用来写 ...

  5. 201521123031 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  6. 201521123098 《Java程序设计》第2周学习总结

    1. 本周学习总结 1. 熟悉了一些码云中储存eclipse中代码的操作,利于随时储存代码,避免U盘丢失导致代码丢失的问题: 2. 了解了如何从码云中提取已储存的代码: 3. 学会了如何创建动态数组, ...

  7. 201521123001《Java程序设计》第1周学习总结

    1. 本周学习总结 java和我们以前学的C语言的区别大致有: C语言可以直接操作内存,java不能直接操作: C语言的代码不能跨平台,java的代码可以跨平台: C语言有指针,java没有指针: C ...

  8. 201521123017 《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 Q1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 1.1 截图 1.2 4-2中fin ...

  9. 201521123023《Java程序设计》第13周学习总结

    1. 本周学习总结 (1)网络中为了进行数据交换(通信)而建立的规则.标准或约定(=语义+语法+规则)称之为协议(常用http/ftp) (2)大致熟悉了TCP协议,但是UDP怎么辣么蓝,好理解却用不 ...

  10. Java课程设计——计算器团队博客

    1.团队名称.团队成员介绍(需要有照片) 1.1团队名称 707 1.2团队成员介绍 谢元将:组长 罗登宇:组员 王华俊:组员 2. 项目git地址 谢元将 罗登宇 王华俊 3. 项目git提交记录截 ...