⑴ React開發時 修改數據後 表格數據在火狐瀏覽器上不更新 仍然顯示第一次打開表格時的數據
緩存數據不刷新的問題吧，按Crtl+Shift+Del，然後清理瀏覽器緩存文件試試。
⑵ react怎麼收集整個form表單的值
orm.js
var React = require('react');
var ReactDOM = require('react-dom');
var {Form, Input} = require('react-form');
var {Password, Text} = require('react-form-inputs');
var LoginForm = React.createClass({
render() {
return (
<div>
<Form {...this.props} for="user">
<h1>Login</h1>
<Input type={Text} for="username" placeholder="Username" />
<Input type={Password} for="password" placeholder="Password" />
<input type="submit" value="Login" />
</Form>
</div>
⑶ reactjs會不會有網頁緩存
會有網頁緩存.
因為沒有怎麼在項目中使用過，只是有一些大概的了解；整的庫的設計思維是比較大膽的，採用了單向數據流；以JavaScript為核心，HTML還有CSS都被JS所控制；函數編程的思想。更重要的一點是，配合ReactNative我們可以開發Android和iOS應用，想想都激動。當然這里邊的坑也是不少的。
⑷ react + tabs 切換有緩存不重新發起請求
可以看到當tab 切換的時候我有個change 事件
在子組件內部 我做了個處理
這樣 每當切換的時候 就會有一個 不同的key 傳下去 一對比 再次發起請求就好啦
下面進行一個優化
因為我這個內部組件是循環得到的
因此我每次循環都會有個對比 而組件內部就會有個不同的key 做比較 我循環多少次 其實組件就發送了多少個請求 這明顯是不合理的
⑸ react動態表單為什麼很卡
因為參數顯示也會動態改變。
在Modal對話框中選擇Select中的選項，每個選項對應了不同的參數，將這些參數顯示在頁面選項下方。當動態切換選項時，參數的顯示也會動態改變。
React 教程 React 是一個用於構建用戶界面的 JAVASCRIPT 庫，React 主要用於構建 UI,很多人認為 React 是MVC 中的 V(視圖)。 React 起源於 Facebook 的內部項目，React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什麼比傳統數據綁定更簡單，通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
⑹ react在瀏覽器緩存對象
useRecer。因為瀏覽器內部運用了useRecer狀態管理，管理緩存狀態，可以更靈活，操縱緩存路由組件，採用reacthooks全新api，渲染節流，手動解除緩存，增加了緩存的狀態周期，監聽函數等。
⑺ react 頁面緩存插件react-router-cache-route
此插件可以滿足緩存上一頁的功能，即：返回上一頁的時候，上一頁的滾動條、動作狀態等等和離開這個頁面時的狀態保持一致。
搭配 react-router 工作的、帶緩存功能的路由組件，類似於 Vue 中的 keep-alive 功能。
Route 中配置的組件在路徑不匹配時會被卸載（render 方法中 return null），對應的真實節點也將從 dom 樹中刪除，利用Route暴露的children方法，讓我們手動控制渲染。
注意：作者測試使用時版本為1.4.6
緩存語句不要寫在 Switch 組件當中，因為 Switch組件會卸載掉所有非匹配狀態下的路由，需使用 CacheSwitch 替代 Switch。
使用 when 屬性決定何時使用緩存功能，可選值為 [forward, back, always] ，默認值為 forward。
使用 className 屬性給包裹組件添加自定義樣式。
也可以使用 behavior 屬性來自定義緩存狀態下組件的隱藏方式，工作方式是根據 CacheRoute 當前的緩存狀態，返回一個作用於包裹組件的 props。
使用 CacheRoute 的組件將會得到一個名為 cacheLifecycles 的屬性，裡麵包含兩個額外生命周期的注入函數 didCache 和 didRecover，分別用在組件 被緩存 和 被恢復 時
github地址
⑻ React實現數據驅動的tab頁緩存
在開發後台管理頁面的時候，會遇到緩存Tab頁面數據的需求。在開發時也希望能夠使用數組驅動的方式控制Tab頁的緩存，並且使用API進一步控制tab頁緩存或者其他頁緩存。
之前關注的開發者新寫了一個模塊，正好滿足了我的需求
react-activation: https://github.com/CJY0208/react-activation
原理應該是把Alive組件下的dom掛載到Provider組件的display:none的一個節點，當路由切回來時，在從provider中找之前掛在的alive dom。作者已經幫我們實現了，用就是了。
使用react-activation提供的KeepAlive組件包裹你的頁面組件，控制KeepAlive的when值
作者提供了demo： 可關閉的路由 tabs 示例
但這個是API控制的，我更希望使用一個[]數據來驅動tabs和頁面緩存
使用rex管理這個數據，建立了一個tabs數組，我希望tabs和頁面是否被緩存，都是響應這個數組。
我寫了2個action去操作這個tabs,新增,和刪除
然後我希望rex中的tabs的變化，能觸發我的視圖更新，用React-Rex提供的connect將store中的tabs綁定到組件上。當tabs發生變化時，我的緩存組件就能響應到，從而改變keepAlive的when值，實現緩存控制
當組件已經能響應tabs的變化時，添加更多功能【關閉/關閉其他/關閉到右側/關閉全部】，通過寫不同的action操作tabs數組就可以了
⑼ React性能優化指南
使用React開發的項目，可以從載入性能和運行時性能兩個方面進行優化。
載入性能優化的目標是讓用戶更早地看到界面、更早地和應用交互。運行時性能優化目標是降低卡頓，交互更流暢 。
我們知道React的setState會觸發diff和更新。默認是將整個組件樹進行對比，但很多情況下diff是不必要的，因為一個子組件的props沒有改變，就不需要進行diff工作。
為了避免這種對沒有改變props的子組件進行多餘的diff工作的情況，React提供了shouldComponentUpdate這個生命周期鉤子， shouldComponentUpdate(nextProps, nextState) 。 這個生命周期鉤子如果返回true，則會執行後面的render和diff工作，如果返回false，則React不會向下繼續。用戶可以在這個生命周期鉤子中進行state和props的對比，判斷是否需要更新。通常一個組件當前的props與nextProps屬性值相同，並且state的屬性值也相同，則不需要更新。
React.PureComponent實現了shouldComponentUpdate這個方法，PureComponent採用了淺比較，
【 前端面試刷題網站 ： 靈題庫 ，收集大廠面試真題，相關知識點詳細解析。】
對應class組件的PureComponent，函數組件有React.memo方法實現類似的效果。
React.memo
由於默認的PureComponent和memo都是默認用的淺比較。因此如果對象層級較深，會導致漏更新。
解決辦法是，如果對象改變，重新創建一個對象，如果數組改變，重新創建一個數組，解構賦值可以很容易地實現這一點： {...oldData}；[...oldArr] 。
用戶可以自己實現shouldComponentUpdate以自定義比較邏輯，對於函數式組件，則可以通過React.memo的第二個參數來定義比較邏輯。
如果想要精確地判斷區別，除了手動判斷，還有一個自動化程度比較高的方式：不可變數據，這時一個不可變數據的JS實現： immutable-js 。
只有發生改動的節點會創建新的引用，因此相應的組件才會執行render和diff。
結論：最佳實踐是PureComponent/React.memo + 不可變數據。
Fragment可以避免不必要的dom節點。
JSX的標簽表達式要求有一個根節點
如果就想讓表達式返回一個標簽列表，不應該在最外層加一個根節點，應該使用Fragment。
也可以簡寫
在注冊事件回調時候，不要用匿名函數或者用bind生成新函數，應該用箭頭函數或者構造裡面bind，最好是構造函數裡面bind（因為可以繼承）。
當我們需要注冊事件回調時候，可以寫成這樣寫：
或者
上面這兩種：匿名函數和bind表達式，都不推薦 。因為匿名函數的寫法會在每次調用render時候都創建新的函數，而bind表達式也會在每次調用時候創建一個新的函數，React做diff時候發現事件回調函數不同，就會將舊的函數解綁（這樣還會觸發GC）並且綁定新的函數。
因此最好這樣實現
或者
更推薦後者，因為我們知道：
class Test {log = () => {};} 和 class Test {log() {}}
這兩種寫法的區別在於前者log是類的實例方法，而後者是原型方法，因此在構造函數中綁定，能讓其他使用原型繼承方法繼承Test的組件可以繼承到log方法。
如果使用函數式組件，應該使用useCallback這個hook。關於useCallback的使用，請參考本知識庫的React進階一文。
因為React在解析JSX時候需要將style對象解析成css style字元串。更推薦將樣式寫在CSS中。
如果在render方法進行setState，可能導致循環地進行diff工作。
讓條件分支中只包含需要改動的元素，不包含不需要改動的元素，防止diff子節點和更新節點時候增加不必要的操作，消耗性能。
示例：
應該改成下面這種寫法：
我們知道，Vue中有計算屬性的能力，能夠根據依賴的數據計算出我們關心的數據，而且有緩存的能力：依賴的值不變的話，不需要計算，直接返回結果。
React如果想要實現根據依賴的數據計算我們關心的數據，方法很簡單。
但是這樣實現沒有緩存值的能力，當計算耗時較長時候會影響性能。
如何實現緩存值的能力呢？
可以使用memorize-one這個庫： https://www.npmjs.com/package/memorize-one
如果使用函數式組件，可以使用useMemo來實現。關於useMemo庫的使用，請參考本講義中React進階一文。
react-vitualize
啟用concurrent mode之後，React會採取可中斷渲染，讓大規模的diff計算不會影響到界面的渲染，保證渲染和交互的流暢性。
使用Suspense組件可以在載入局部組件時候有更好的切換載入體驗。
concurrent詳細的介紹請閱讀本系列concurrent mode文章。
不使用key或者用index作為key，都可能使列表在變化時候，讓React無法辨別前後item對應關系，只能遍歷對比，更新屬性，這樣可能會有多餘的操作，造成性能損耗。
為什麼需要key呢？我會單獨寫一篇文章詳細講解。
React官方提供了一個性能檢測工具： react-addons-perf 。
這個工具可以在渲染React應用時候列印各個組件的各種耗時，用來分析性能浪費。
其中比較重要的一個方法是printWasted()，可以列印並未更新組件的渲染操作，如果發現你的組件花了很長時間render和diff，但組件視圖實際並未發生變化，那就要考慮是否需要引入PureComponent等優化渲染性能了。
⑽ react緩存函數的方法
給需要緩存的函數加一層高階組件，在高階組件中通過ref獲取到該組件的實例，在ComponentDidMount中通過ref獲取到的實例，調用組件的setState方法，把緩存的上一次的state數據注入進去，在ComponentWillUnmount中通過ref獲取到的實例，去獲取其所有state的值，並存在緩存中。
React 的函數組件是React 組件的另一種定義方式，兩種方式都可以用於定義組件，但是相比於類組件，函數組件要更簡單好用些。
由於 React的設計思想極其獨特，屬於革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。