React 中
本地除錯React程式碼的方法
- 先將React程式碼下載到本地，進入專案資料夾後
yarn build - 利用create-react-app建立一個自己的專案
- 把react原始碼和自己剛剛建立的專案關聯起來，之前build原始碼到build資料夾下面，然後cd到react資料夾下面的build資料夾下。裡面有node_modules資料夾，進入此資料夾。發現有react資料夾和react-dom資料夾。分別進入到這兩個資料夾。分別執行yarn link。此時建立了兩個快捷方式。react和react-dom
- cd到自己專案的目錄下，執行yarn link react react-dom 。此時在你專案裡就使用了react原始碼下的build的相關檔案。如果你對react原始碼有修改，就重新整理下專案，就能裡面體現在你的專案裡。
場景
假設有這樣一個場景，父元件傳遞子元件一個A引數，子元件需要監聽A引數的變化轉換為state。
16之前
在React以前我們可以使用componentWillReveiveProps來監聽props的變換
16之後
在最新版本的React中可以使用新出的getDerivedStateFromProps進行props的監聽，getDerivedStateFromProps可以返回null或者一個物件，如果是物件，則會更新state
getDerivedStateFromProps觸發條件
我們的目標就是找到 getDerivedStateFromProps的 觸發條件
我們知道，只要呼叫setState就會觸發getDerivedStateFromProps，並且props的值相同，也會觸發getDerivedStateFromProps(16.3版本之後)
setState在react.development.js當中
Component.prototype.setState = function (partialState, callback) {
!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : void 0;
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
複製程式碼ReactNoopUpdateQueue {
//...部分省略
enqueueSetState: function (publicInstance, partialState, callback, callerName) {
warnNoop(publicInstance, 'setState');
}
}
複製程式碼執行的是一個警告方法
function warnNoop(publicInstance, callerName) {
{
// 例項的構造體
var _constructor = publicInstance.constructor;
var componentName = _constructor && (_constructor.displayName || _constructor.name) || 'ReactClass';
// 組成一個key 元件名稱+方法名（列如setState）
var warningKey = componentName + '.' + callerName;
// 如果已經輸出過警告了就不會再輸出
if (didWarnStateUpdateForUnmountedComponent[warningKey]) {
return;
}
// 在開發者工具的終端裡輸出警告日誌 不能直接使用 component.setState來呼叫
warningWithoutStack$1(false, "Can't call %s on a component that is not yet mounted. " + 'This is a no-op, but it might indicate a bug in your application. ' + 'Instead, assign to `this.state` directly or define a `state = {};` ' + 'class property with the desired state in the %s component.', callerName, componentName);
didWarnStateUpdateForUnmountedComponent[warningKey] = true;
}
}
複製程式碼看來ReactNoopUpdateQueue是一個抽象類，實際的方法並不是在這裡實現的，同時我們看下最初updater賦值的地方，初始化Component時，會傳入實際的updater
function Component(props, context, updater) {
this.props = props;
this.context = context;
// If a component has string refs, we will assign a different object later.
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;
}
複製程式碼我們在元件的構造方法當中將this進行列印
class App extends Component {
constructor(props) {
super(props);
//..省略
console.log('constructor', this);
}
}
複製程式碼
方法指向的是，在react-dom.development.js的classComponentUpdater
var classComponentUpdater = {
// 是否渲染
isMounted: isMounted,
enqueueSetState: function(inst, payload, callback) {
// inst 是fiber
inst = inst._reactInternalFiber;
// 獲取時間
var currentTime = requestCurrentTime();
currentTime = computeExpirationForFiber(currentTime, inst);
// 根據更新時間初始化一個標識物件
var update = createUpdate(currentTime);
update.payload = payload;
void 0 !== callback && null !== callback && (update.callback = callback);
// 排隊更新 將更新任務加入佇列當中
enqueueUpdate(inst, update);
//
scheduleWork(inst, currentTime);
},
// ..省略
}
複製程式碼enqueueUpdate 就是將更新任務加入佇列當中
function enqueueUpdate(fiber, update) {
var alternate = fiber.alternate;
// 如果alternat為空並且更新佇列為空則建立更新佇列
if (null === alternate) {
var queue1 = fiber.updateQueue;
var queue2 = null;
null === queue1 &&
(queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState));
} else
(queue1 = fiber.updateQueue),
(queue2 = alternate.updateQueue),
null === queue1
? null === queue2
? ((queue1 = fiber.updateQueue = createUpdateQueue(
fiber.memoizedState
)),
(queue2 = alternate.updateQueue = createUpdateQueue(
alternate.memoizedState
)))
: (queue1 = fiber.updateQueue = cloneUpdateQueue(queue2))
: null === queue2 &&
(queue2 = alternate.updateQueue = cloneUpdateQueue(queue1));
null === queue2 || queue1 === queue2
? appendUpdateToQueue(queue1, update)
: null === queue1.lastUpdate || null === queue2.lastUpdate
? (appendUpdateToQueue(queue1, update),
appendUpdateToQueue(queue2, update))
: (appendUpdateToQueue(queue1, update), (queue2.lastUpdate = update));
}
複製程式碼我們看scheduleWork下
function scheduleWork(fiber, expirationTime) {
// 獲取根 node
var root = scheduleWorkToRoot(fiber, expirationTime);
null !== root &&
(!isWorking &&
0 !== nextRenderExpirationTime &&
expirationTime < nextRenderExpirationTime &&
((interruptedBy = fiber), resetStack()),
markPendingPriorityLevel(root, expirationTime),
(isWorking && !isCommitting$1 && nextRoot === root) ||
requestWork(root, root.expirationTime),
nestedUpdateCount > NESTED_UPDATE_LIMIT &&
((nestedUpdateCount = 0), reactProdInvariant("185")));
}
複製程式碼function requestWork(root, expirationTime) {
// 將需要渲染的root進行記錄
addRootToSchedule(root, expirationTime);
if (isRendering) {
// Prevent reentrancy. Remaining work will be scheduled at the end of
// the currently rendering batch.
return;
}
if (isBatchingUpdates) {
// Flush work at the end of the batch.
if (isUnbatchingUpdates) {
// ...unless we're inside unbatchedUpdates, in which case we should
// flush it now.
nextFlushedRoot = root;
nextFlushedExpirationTime = Sync;
performWorkOnRoot(root, Sync, true);
}
// 執行到這邊直接return，此時setState()這個過程已經結束
return;
}
// TODO: Get rid of Sync and use current time?
if (expirationTime === Sync) {
performSyncWork();
} else {
scheduleCallbackWithExpirationTime(root, expirationTime);
}
}
複製程式碼太過複雜，一些方法其實還沒有看懂，但是根據斷點可以把執行順序先理一下，在setState之後會執行performSyncWork，隨後是如下的一個執行順序
performSyncWork => performWorkOnRoot => renderRoot => workLoop => performUnitOfWork => beginWork => applyDerivedStateFromProps
最終方法是執行
function applyDerivedStateFromProps(
workInProgress,
ctor,
getDerivedStateFromProps,
nextProps
) {
var prevState = workInProgress.memoizedState;
{
if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
// Invoke the function an extra time to help detect side-effects.
getDerivedStateFromProps(nextProps, prevState);
}
}
// 獲取改變的state
var partialState = getDerivedStateFromProps(nextProps, prevState);
{
// 對一些錯誤格式進行警告
warnOnUndefinedDerivedState(ctor, partialState);
} // Merge the partial state and the previous state.
// 判斷getDerivedStateFromProps返回的格式是否為空，如果不為空則將由原的state和它的返回值合併
var memoizedState = partialState === null || partialState === undefined ? prevState : _assign({}, prevState, partialState);
// 設定state
// 一旦更新佇列為空，將派生狀態保留在基礎狀態當中
workInProgress.memoizedState = memoizedState; // Once the update queue is empty, persist the derived state onto the
// base state.
var updateQueue = workInProgress.updateQueue;
if (updateQueue !== null && workInProgress.expirationTime === NoWork) {
updateQueue.baseState = memoizedState;
}
}
複製程式碼Vue
vue監聽變數變化依靠的是watch，因此我們先從原始碼中看看，watch是在哪裡觸發的。
Watch觸發條件
在src/core/instance中有initState()
/core/instance/state.js
在資料初始化時initData()，會將每vue的data註冊到objerserver中
function initData (vm: Component) {
// ...省略部分程式碼
// observe data
observe(data, true /* asRootData */)
}
複製程式碼/**
* Attempt to create an observer instance for a value,
* returns the new observer if successfully observed,
* or the existing observer if the value already has one.
*/
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
} else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
// 建立observer
ob = new Observer(value)
}
if (asRootData && ob) {
ob.vmCount++
}
return ob
}
複製程式碼來看下observer的構造方法，不管是array還是obj，他們最終都會呼叫的是this.walk()
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
// 遍歷array中的每個值，然後呼叫walk
this.observeArray(value)
} else {
this.walk(value)
}
}
複製程式碼我們再來看下walk方法，walk方法就是將object中的執行defineReactive()方法，而這個方法實際就是改寫set和get方法
/**
* Walk through each property and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*/
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
複製程式碼/core/observer/index.js
defineReactive方法最為核心，它將set和get方法改寫，如果我們重新對變數進行賦值，那麼會判斷變數的新值是否等於舊值，如果不相等，則會觸發dep.notify()從而回撥watch中的方法。
/**
* Define a reactive property on an Object.
*/
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
// dep當中存放的是watcher陣列
const dep = new Dep()
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
// 如果第三個值沒有傳。那麼val就直接從obj中根據key的值獲取
val = obj[key]
}
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
// 可設定值
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
// dep中生成個watcher
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
// 重點看set方法
set: function reactiveSetter (newVal) {
// 獲取變數原始值
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
// 進行重複值比較 如果相等直接return
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
// dev環境可以直接自定義set
customSetter()
}
// 將新的值賦值
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
// 觸發watch事件
// dep當中是一個wacher的陣列
// notify會執行wacher陣列的update方法，update方法觸發最終的watcher的run方法，觸發watch回撥
dep.notify()
}
})
}
複製程式碼小程式
自定義Watch
小程式的data本身是不支援watch的，但是我們可以自行新增，我們參照Vue的寫法自己寫一個。
watcher.js
export function defineReactive (obj, key, callbackObj, val) {
const property = Object.getOwnPropertyDescriptor(obj, key);
console.log(property);
const getter = property && property.get;
const setter = property && property.set;
val = obj[key]
const callback = callbackObj[key];
Object.defineProperty(obj, key, {
enumerable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
return value
},
set: (newVal) => {
console.log('start set');
const value = getter ? getter.call(obj) : val
if (typeof callback === 'function') {
callback(newVal, val);
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
console.log('finish set', newVal);
}
});
}
export function watch(cxt, callbackObj) {
const data = cxt.data
for (const key in data) {
console.log(key);
defineReactive(data, key, callbackObj)
}
}
複製程式碼使用
我們在執行watch回撥前沒有對新老賦值進行比較，原因是微信當中對data中的變數賦值，即使給引用變數賦值還是相同的值，也會因為引用地址不同，判斷不相等。如果想對新老值進行比較就不能使用===，可以先對obj或者array轉換為json字串再比較。
//index.js
//獲取應用例項
const app = getApp()
import {watch} from '../../utils/watcher';
Page({
data: {
motto: 'hello world',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
tableData: []
},
onLoad: function () {
this.initWatcher();
},
initWatcher () {
watch(this, {
motto(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
},
userInfo(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
},
tableData(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
}
});
},
onClickChangeStringData() {
this.setData({
motto: 'hello'
});
},
onClickChangeObjData() {
this.setData({
userInfo: {
name: 'helo'
}
});
},
onClickChangeArrayDataA() {
const tableData = [];
this.setData({
tableData
});
}
})
複製程式碼參考
廣而告之
本文釋出於薄荷前端週刊，歡迎Watch & Star ★，轉載請註明出處。