react非同步載入元件封裝
作者正在開源乙個基於react+typescript+node.js的部落格系統，原始碼在練手開源專案， 有想一起學習的或者有空的大佬可以幫我看看**，提提意見，順便給個star最好不過拉。謝謝大家
1. 場景敘述
今天，碰到這樣乙個問題，就是當表單過載修改的時候，需要根據介面返回的資料來實現表單的初始化，如果是自己封裝的受控元件的話，其實很簡單，直接通過value賦值，然後通過onchange做後續的改變就好了。我使用的是zent元件庫，在實際操作的時候發現這麼乙個問題，就是封裝好的元件庫中的defaultvalue，他只能將第一次傳入的值作為初始值，當通過非同步請求得到defaultvalue再改變其值的話，無法得到相應改變!
2. 場景模擬
好吧，說了這麼多可能沒了解我的意思，我們來模擬一下這個場景
// 先假設定義乙個表單(抄的zent的官網的例子)
function component(props) = props;
const form = form.useform(formstrategy.view);
return ();
}
const [defaultvalue, setvalue] = usestate("");
const _getvalue = () => );
};const loadfunc = value => () => ;
useeffect(() =>
getvalue()
}, )
return (
);}
上述**理論上隨著defaultvalue變為init123，應該使用者名稱的預設值會變為init123, 然而其預設值還是123
3. 原因分析
主要原因是***forminputfield只在元件載入的時候將該value設定為defaultvalue，因此當後續改變defaultvalue並不會改變該input的value值***。要解決該問題有兩個方法。
const [defaultvalue, setvalue] = usestate("");
useeffect(() =>
getvalue()
}, )
return (
);}
這種方法確實可以解決這個問題，但是這種方法看上去不太優雅和通用，如果我們每次都需要判斷乙個值的存在與否來載入元件，有一些不方便，因此我們可以封裝乙個非同步載入的元件，來完成這個工作。
react之元件非同步載入
我們在用react的時候，希望元件非同步載入，提高效能，那麼應該怎麼實現呢？往下看。react非同步載入的方法很多，這裡只說一種，因為這一種直接使用react的特性就可以了，不需要另外配置webpack，就是用乙個小技巧去import元件，所以方便，實現簡單。寫乙個元件a，這個元件內部會載入另外的元...
react非同步載入元件，分模組載入，提高開啟效能
react非同步載入的方法很多，這裡只說一種，因為這一種直接使用react的特性就可以了，不需要另外配置webpack，就是用乙個小技巧去import元件，所以方便，實現簡單。寫乙個元件a，這個元件內部會載入另外的元件b，用b的內容完全覆蓋到a上面，路由需要開啟a的時候，內容載入的b才會調起，達到非...
react元件開發
1.元件建立腳手架 create react library是乙個用來建立react元件庫的cli,中文文件 隱式配置 建立好工程後，修改根目錄下的package.json中scripts節點下的start和build命令 build microbundle crl css modules fals...