Thinking in React Implemented by Reagent

maochunguang 發(fā)布于2019-08-21 17:08 / 1739人閱讀

摘要：前言本文是學(xué)習(xí)這一章后的記錄，并且用實現(xiàn)其中的示例。因此得到如下結(jié)構(gòu)而數(shù)據(jù)則從頂層組件往下流動，各層提取各自數(shù)據(jù)進行渲染。而交互的意思是，對的操作會影響應(yīng)用數(shù)據(jù)，從而刷新。更新值更新值注意中使用時，需要定義一個返回函數(shù)的高階函數(shù)來實現(xiàn)。

前言

?本文是學(xué)習(xí)Thinking in React這一章后的記錄，并且用Reagent實現(xiàn)其中的示例。

概要

構(gòu)造恰當?shù)臄?shù)據(jù)結(jié)構(gòu)

從靜態(tài)非交互版本開始

追加交互代碼

一、構(gòu)造恰當?shù)臄?shù)據(jù)結(jié)構(gòu)

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的映射交出，而更專注于數(shù)據(jù)和數(shù)據(jù)結(jié)構(gòu)本身，即是折騰數(shù)據(jù)和數(shù)據(jù)結(jié)構(gòu)才是我們的主要工作。因此我們要設(shè)計出與View中組件結(jié)構(gòu)對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，然后將不符合該數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)做一系列轉(zhuǎn)換，然后將數(shù)據(jù)交給React就好了。
?居上所述那么可以知道，數(shù)據(jù)結(jié)構(gòu)就依賴View的結(jié)構(gòu)，那么如何設(shè)計View的結(jié)構(gòu)呢？是采用Top-down還是Bottom-up的方式呢？對于小型應(yīng)用我們直接采用Top-down即可，對于大型應(yīng)用則采用Bottom-up更合適。（根據(jù)過往經(jīng)驗將大規(guī)模的問題域拆分成多個小規(guī)模的問題域，然后對小問題域采用Top-down方式，若無法直接采用Top-down方式則繼續(xù)拆分，然后將多個小問題域的值域組合即可得到大問題域的值域）
?無論是Top-down還是Bottom-up方式，都要將View構(gòu)建為樹結(jié)構(gòu)（這很符合DOM結(jié)構(gòu)嘛）。因此得到如下結(jié)構(gòu)

FilterableProductTable
|_SearchBar
|_ProductTable
  |_ProductCategoryRow
  |_ProductRow

?而數(shù)據(jù)則從頂層View組件往下流動，各層提取各自數(shù)據(jù)進行渲染。

二、從靜態(tài)非交互版本開始

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.

?從設(shè)計(他人或自己)那得到設(shè)計稿或HTML模板，我們就可以開始著手重構(gòu)模板、添加交互效果和填充業(yè)務(wù)邏輯和服務(wù)端交互等功能了。且慢，我們先不著急動手，而是要先分清工作步驟，才能有條不紊地包質(zhì)保量工作哦！

目標：得到符合React規(guī)范的View結(jié)構(gòu)

目標：得到最低標準的可交互的React應(yīng)用

目標：補充業(yè)務(wù)邏輯，細化交互

目標：連接遠程數(shù)據(jù)源，細化交互

(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 
         
         
         
         )

(declare get-rows)

(defn 
  [products]
  [:div
    []
    [ products]])

(defn 
  []
  [:form
    [:input {:placeholder "Search..."}]
    [:input {:type "checkbox"}]
    "Only show products in stock."])

(defn 
  [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}[ curr-cate])
                        (list))
            rows (cons ^{:key (:name product)} [ 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 
  [cate]
  [:tr
    [:td {:colSpan 2} cate]])

(defn 
  [product]
  [:tr
    [:td (when (:stocked product) {:style {:color "red"}})
      (:name product)]
    [:td (:price product)]])

?這一步我們并沒有提供交互功能，因此只會用到prop傳遞數(shù)據(jù)，絕對不會用到state的。而交互的意思是，對View的操作會影響應(yīng)用數(shù)據(jù)，從而刷新View。

三、追加交互代碼

?交互實質(zhì)上就是觸發(fā)View狀態(tài)變化，那么就必須提供一種容器來暫存當前View的狀態(tài)，而這個在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 
         
         
         
         )

(declare get-rows
         validate-product)


(defn 
  [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
        [ on-search-text-change on-stocked?-change]
        [ (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 
  [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 
  [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}[ curr-cate])
                        (list))
            rows (cons ^{:key (:name product)} [ 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 
  [cate]
  [:tr
    [:td {:colSpan 2} cate]])

(defn 
  [product]
  [:tr
    [:td (when (:stocked product) {:style {:color "red"}})
      (:name product)]
    [:td (:price product)]])

注意：reagent中使用state時，需要定義一個返回函數(shù)的高階函數(shù)來實現(xiàn)。

(defn  [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 [ 1]
           (.querySelector js/document "#app"))

總結(jié)

?尊重原創(chuàng)，轉(zhuǎn)載請注明轉(zhuǎn)自：http://www.cnblogs.com/fsjohn... ^_^肥仔John

參考

https://reactjs.org/docs/thin...

云服務(wù)器 GPU云服務(wù)器 thinking-in-小記 thinking-in小記 Reagent Implemented

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89173.html

發(fā)表評論

登陸后可評論

0條評論

maochunguang

男|高級講師

我要關(guān)注我要私信

TA的文章

Java基礎(chǔ)語法筆記

閱讀 1261·2021-09-04 16:41
AHJCDN：免備案CDN，無視DDOS/CC攻擊的CDN，香港/美國GIA高速節(jié)點，提供免費套餐

閱讀 2423·2021-09-02 10:18
Yoshino: 一個基于React的可定制化的PC組件庫

閱讀 927·2019-08-29 16:40
html&css面試筆記

閱讀 2623·2019-08-29 16:14
Visual Studio Code 裝飾器提示“experimentalDecorators”的解

閱讀 914·2019-08-26 13:41
使用node打造自己的命令行工具方法教程

閱讀 1308·2019-08-26 12:24
今天，我明白了JS事件循環(huán)機制

閱讀 739·2019-08-26 10:24
JavaScript 中的 forEach 源碼

閱讀 2879·2019-08-23 17:54

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Thinking in React Implemented by Reagent

相關(guān)文章

學(xué)習(xí)React系列2-[解讀]Thinking in React

【譯】渲染Elements

Compress image using JavaScript directly from the

【Change Detection系列一】$digest 在Angular新版本中重生

發(fā)表評論

0條評論

maochunguang

男|高級講師

TA的文章

Java基礎(chǔ)語法筆記

AHJCDN：免備案CDN，無視DDOS/CC攻擊的CDN，香港/美國GIA高速節(jié)點，提供免費套餐

Yoshino: 一個基于React的可定制化的PC組件庫

html&css面試筆記

Visual Studio Code 裝飾器提示“experimentalDecorators”的解

使用node打造自己的命令行工具方法教程

今天，我明白了JS事件循環(huán)機制

JavaScript 中的 forEach 源碼

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Thinking in React Implemented by Reagent

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！