rc form之最單純情況

第一次探索這個框架，對於裡面很多邏輯是不懂的，所以只能一點一點去揣摩，其中做了什麼。

而學習過程中，總是禁不住好奇這裡的邏輯是幹什麼的，那裡的邏輯是什麼的，在不理解這段邏輯是做什麼的情況下，死磕很容易事倍功半。所以本次先從乙個比較簡單的場景入手，看看它的原始碼中做了什麼手腳，至於有些邏輯沒有涉及到的，先不去管它就好了。

首先上圖，看看這次案例的效果。

}}ps: 原始碼分析以**+備註的形式展示

import createbaseform from './createbaseform';
// 一系列給其他元件用的自定義混入
export const mixin = ;
},};function createform(options) 
export default createform;

這裡我們看到，其實createform本身沒做什麼事情，只是在該檔案內定義了混入的格式。

接下來我們的重點是createbaseform中做了什麼。這裡只列出跟我們案例相關的內容

//整體結構
function createbaseform(options={}, mixins={} ) = option;
const form = createreactclass(
componentwillreceiveprops(nextprops) 
oncollect()
oncollectcommon() {}
getcachebind() 
getfielddecorator() 
getfieldprops() 
// 一些其他函式
render() ;
// ** 精簡本次分析無關的**
// 這裡用了乙個小技巧，就是call(this,***),直接將該元件上的核心方法，全都放到了子元件的屬性上，而且由於該元件是createreactclass建立的，所以子元件(本例中的form)呼叫這些從父元件獲取的方法時，方法內部的this,指向當前元件。
...formprops,
...restprops,
});},
},}）
//簡化靜態方法轉移部分
return form;}}

當createbaseform函式在渲染函式中返回了我們的form元件後，就可以看到form元件中做的事情。

form.js

class form extends react.component ;
componentwillmount() 
onsubmit = (e) => else 
});};
onchange = (e) => 
render() = this.props.form;
return ();
}}

重點了。關鍵是看看getfielddecorator中做了什麼。

getfielddecorator(name, fieldoption) );
};},

其中getfieldprops值得我們關注

// 簡化後的內容如下
getfieldprops(name, usersfieldoption = {}) ;
const = fieldoption;
// 第一次get元資料一般得不到，內部會返回個空物件
const fieldmeta = this.fieldsstore.getfieldmeta(name);
if ('initialvalue' in fieldoption) 
// 這裡的inputprops簡化後結果為，第一次為空。
const inputprops = ;
// make sure that the value will be collect
// 這裡用來在getfielddecorator第二個引數為空時，確保給input繫結乙個基本的onchange事件來收集input的修改值，最終放入fieldsstore中
if (trigger && validatetriggers.indexof(trigger) === -1) 
// 這裡就是我們fieldsstore中設定的元資料
const meta = ;
this.fieldsstore.setfieldmeta(name, meta);
// 這裡返回的；
return inputprops;
},

上述**中onchange繫結了乙個oncollect，其中getcachebind函式主要是修正函式使用時候this指標。此處忽略直接分析oncollect

oncollect(name_, action, ...args)  = this.oncollectcommon(name_, action, args);
const = fieldmeta;
const newfield = ;
// 更新fieldstore中的值，主要觸發了乙個forceupdate方法，重新渲染該元件
this.setfields();
},

最後關鍵的一步就是看看oncollectcommon做了什麼

oncollectcommon(name, action, args)  else if (fieldmeta.originalprops && fieldmeta.originalprops[action]) 
// 此處的getvaluefromevent其實就是取e.target.value.
const value = fieldmeta.getvaluefromevent ?
fieldmeta.getvaluefromevent(...args) :
getvaluefromevent(...args);
const field = this.fieldsstore.getfield(name);
return (, fieldmeta });
},

至此整個資料流程基本跑通，onchange觸發oncollect去改變fieldstore中的值並forceupdate更新介面，oncollectcommon則展示了oncollect取值的細節。forceupdate更新元件後，觸發form的render方法，又開始了之前getfielddecorator中讀取fieldstore中值，返回被修改後的元件的流程。

跑通了最簡單的場景，就可以向下一步更複雜的場景探索了。

至此乙個最簡單的流程已經分析完畢。接下來，需要考慮的就是表單驗證，資料反顯(從後端拿到資料渲染編輯頁面)等等，一步乙個腳印，慢慢來吧。

rc form之最單純情況

Python練習題19 《沉默的羔羊》之最多單詞

世界樹木之最

中位數之最

rc form之最單純情況

Python練習題19 《沉默的羔羊》之最多單詞

世界樹木之最

中位數之最

相關推薦