react不實現雙向繫結的原因是什麼呢,提高使用者動手能力?

時間 2021-05-05 19:24:41

1樓:COLDHOVER

雙向或者單向, 只是實現某些功能的方式或者理念,React完全可以以雙向的方式去處理元件之間的互動邏輯Vue等也完全可以用單向的資料流維護整個應用的狀態變化...

何必拘泥糾結...

2樓:

react強調乙個重要的概念就是資料的不可寫,唯讀資料,state就是這樣的概念,只留了乙個setstate介面給你呼叫,資料可追蹤可調式,資料不隨便,只有乙個老公,不是誰都可以撩的。

react最關鍵的已經幫你自動做了,就是資料驅動渲染,每次state或props更新都會觸發render,那麼介面上的資料更新,是不是要更改資料模型,這是開發者要考慮的事情,在react的設計模式中,終端元件絕大多數都是無狀態元件,頁面的操作只會觸發乙個mutation或action,action才能間接改變資料。

如果在乙個元件裡,需要頻繁的寫setstate來手動更新狀態,這是反設計模式的,如果要頻繁更新的狀態,首先要放到redux裡,其次要通過相應的action去觸發更改,這才是react設計的本意。

3樓:默語

jsx都做了

為啥for和if就不做

4樓:

歪個樓,Vue 實現雙向繫結(two-ways binding)是通過 v-model 來實現,其實說白了也是針對 Vue 的乙個語法糖,其實你可以用 oninput 加 value 來實現,具體文件可以參考這個。有個答案可以說是直擊要害,現在動不動張口閉口就雙向繫結,可惜都沒怎麼明白雙向繫結是個啥

5樓:丟貓

不實現是給你一定的自主性,可以做其他事情。實際上要實現這個是很容易的,在已有的元件上加hoc就行了。

但是我們未必需要雙向繫結,把整個程式看成乙個function或coroutine,其中有一塊data是實際的業務資料,另一塊data是顯示出去的ui資料。這個ui資料在react上是v dom或者實際的dom,在android上是一堆view,在terminal裡面就是一堆字元介面。乙個有互動的使用者介面和無互動的server程式的區別就是存在乙個function實現從biz data到ui data的對映,以及給使用者提供了改變biz data的介面。

而react主要就是實現了這個對映function和輸入介面標準,在react裡面我實際上並不關注v dom裡面的資料是什麼樣的,對我來說我的業務程式裡ui data是不存在的。我只需要關注biz data,只有biz data的變化,和其關聯的input與output。從biz data到ui data的對映是很自由的,改變biz data的行為也是很自由的,用雙向繫結根本是限制了這個自由度。

我心裡根本就沒有頁面的存在,何須雙向繫結?

6樓:Gavin

react了解一些,對AngularJS比較熟悉。

angular就是有雙向繫結系統的。

react據我了解是採用基於元件的思想來設計的。我覺得這種元件化的設計,本質上來說,比雙向繫結這種「特性」要高階。雙向繫結本質上來說僅僅是一種特性而已,談不上是一種設計思想。

但是元件不同,元件容易復用,能夠快速的搭建系統。angular也有自己的元件系統,我記得好像用的是指令(instructions)這個單詞,但是不是很好用,它的行為有些難以捉摸,理解起來比較複雜。

對於UI展示來說,元件級的設計,或者說,支援元件化往往都是正確的道路。比如Qt,Tk這些古老的UI系統,都是提供了大量優秀的元件。

7樓:馮恆智

不知道算不算原因,因為光靠js無法簡單進行雙向繫結(因為沒有引用傳參),而jsx無非是js的語法糖,當然也實現不了

而angular和vue能直接雙向繫結(ngModel和v-model)是因為它們都各自實現了自己的一套模板引擎,把雙向繫結的髒活在自己的模板引擎裡處理了,使用者才能簡單的使用雙向繫結

react雖然沒有自己的模板引擎只有jsx,但是因為jsx是js語法糖,所以可以完全使用js中的各種特性寫模板,可以搞出hoc這種東西,可以直接在props傳模板(vue的slot功能可替代這種需求),jsx模板靈活性非常之高

還有像ant design這種實現的雙向繫結是只能繫結ant design生成的form模型內部的屬性,而vue和angular則可以雙向繫結模板可訪問到的任意屬性

8樓:

"喜歡是放肆,愛是克制。" 能說明React很克制,還是很愛護開發者的,而不是一味討好一部分開發者。如果理念不認同,Vue/Angular都是很好的選項。

9樓:

寫習慣了vue,再開始react確實有這個困惑。

我覺得你是想說為什麼react沒有在state變化時將data自動同步到dom,在dom value變化時自動同步到state。確實vue內建了這個功能,用起來很爽。

react邏輯是state變化就會執行render,這時需要你自己處理資料結構,完成繫結,渲染更自由的view,而view value的變化除了自己監聽view事件,沒有其他方式感知其變了,它堅持了原生的邏輯,這時你也只能監聽你需要的事件,自由的決定要不要更新state,更新哪些state,你會發現此時就形成了閉環,state變化了又是新一輪的render。

那麼react為什麼沒有做所謂的雙向繫結呢

想一下,如果能像vue似的自動完成這些過程,就必須有乙個地方能快取這個狀態,並watch這個狀態,我想這違背了react的pure programming思想吧。

至於為什麼react要這麼難為自己,我想只能創造react的人才能講出他的初衷與堅持。

最後程式設計思想沒有對錯之分的,國內的環境決定了我們需要快速,特別快速的擼出頁面,react確實比vue慢很多,不知道國外是不是沒有這種需求,所以他們覺得深究問題的本質,程式設計的正規化更有價值吧,寫的快,用著簡單並不是關鍵的,也不是重要的。

10樓:Mad Wiki

其實我覺得最好是在業務資料上單向資料流,但是在功能元件開發上允許雙向繫結,這樣綜合效用最高。

業務上不同的元件之間資料互相影響,用單向資料流可以理得清楚,並且能夠經受產品長期迭代的考驗。但是在開發功能性元件上,這樣效率又比較低,因為功能元件本質上屬於小應用,雙向繫結不足以構成debug困難的情況,卻能大幅提公升開發效率。

不過現在大趨勢比較極端的乙個原因,我猜和開發者的水平參差不齊有關係。因為一旦放出了雙向繫結,甚至跨元件繫結的功能,一定會有人忍不住在業務元件開發中使用,最後的結果就是業務資料流的混亂。

所以我覺得題主的質疑沒有問題。我兩年前就覺得這樣的趨勢挺極端的,但是如果又懶得自己去開創一套什麼東西的話,就湊合著用唄。

11樓:Intopass

單向資料流,特別是採用React+Redux開發的程式具有,邏輯清晰,易於debug的巨大優點。這在規模以上

Leveling Up with React: Redux | CSS-Tricks

React中如何實現雙向資料繫結

Houfeng 可以試試 Mota,它能給 React 帶來類似 ng vue 的雙向繫結的能力 侯鋒 在 React 工程中利用 Mota 編寫物件導向的業務模型 import React from react class Hello extends Component handleInput e...

AngularJS的資料雙向繫結是怎麼實現的?

這有簡易版的實現方式 angular雙向繫結簡單實現 本人簡單模擬了一下Angularjs的雙向資料繫結 簡單模擬了Angularjs的雙向資料繫結 獨孤求掰 知乎專欄 不自己寫指令的話直接用ng mode 就可以了我也是初學者多多指教 AngularJS 仔細看看官方的介紹文件啊 那個定時的答案不...

如何將 HTML 頁面(React實現)的一部分轉成 PDF ?

待宰的豬 其中樣式用react inline css這個庫轉化為內聯樣式 最後用html to pdf這個外掛程式轉化成pdf? 破滅訣 let exportPdf this.refs.exportPdf document find body html exportPdf window.print ...