[TOC] * * * * * # 1 模塊功能 > Component是界面元素自定義實現。 > Component由props,state控制界面元素 > 通過修改props,state來刷新Component > Component生成vnode,然后由DOM.render()掛載到界面dom中 # 2 模塊實現 ## 2.1 Component接口 ~~~ export default class Component { // Component構造函數 constructor(props) { /** @type {object} */ this.props = props || {}; /** @type {object} */ this.state = {}; /** @type {object} */ this.refs = {}; // _blockRender 接受props時狀態控制 // _blockSetState 刷新state時狀態控制 this._blockRender = false; this._blockSetState = false; this._deferSetState = false; // _pendingSetState 合并state時狀態控制 // _pendingState 合并state結果 this._pendingSetState = false; this._pendingState = {}; // _parentNode vnode掛載的父dom節點 // _lastNode 緩存的上次生成的dom節點 this._parentNode = null; this._lastNode = null; // _umounted注冊狀態 this._unmounted = true; this.context = {}; // _patch() 組件dom刷新接口 this._patch = null; // this._parentComponent = null; this._componentToDOMNodeMap = null; } // 生成Component的虛擬dom結構vnode render() { } // 強制刷新組件 forceUpdate(callback) { if (this._unmounted) { throw Error(noOp); } applyState(this, true, callback); } // 修改組件state,事件處理函數中調用 setState(newState, callback) { if (this._unmounted) { throw Error(noOp); } // 在componentWillUpdate()下 if (this._blockSetState === false) { queueStateChanges(this, newState, callback); } else { throw Error('Inferno Warning: Cannot update state via setState() in componentWillUpdate()'); } } // 掛載完回調接口 componentDidMount() { } // 掛載前回調接口 componentWillMount() { } // 注銷前回調接口 componentWillUnmount() { } // props/state刷新后回調接口 applyState() componentDidUpdate() { } // props/state是否更新組件 shouldComponentUpdate() { return true; } // 接受新的props后回調接口 componentWillReceiveProps() { } // props/state刷新前回調接口 componentWillUpdate() { } getChildContext() { } _updateComponent(prevState, nextState, prevProps, nextProps, force) { // 檢測是否注銷 返回點1 if (this._unmounted === true) { this._unmounted = false; return false; } // props.children獲取 if (!isNullOrUndefined(nextProps) && isNullOrUndefined(nextProps.children)) { nextProps.children = prevProps.children; } // props/state比較 if (prevProps !== nextProps || prevState !== nextState || force) { // props不等,接受新的props if (prevProps !== nextProps) { // 接受props時狀態控制 this._blockRender = true; this.componentWillReceiveProps(nextProps); this._blockRender = false; // 合并state if (this._pendingSetState) { nextState = Object.assign({}, nextState, this._pendingState); this._pendingSetState = false; this._pendingState = {}; } } // 是否需要刷新組件 const shouldUpdate = this.shouldComponentUpdate(nextProps, nextState); // 需要刷新組件 if (shouldUpdate !== false || force) { // props/state刷新前回調接口 this._blockSetState = true; this.componentWillUpdate(nextProps, nextState); this._blockSetState = false; // 設置props/state this.props = nextProps; this.state = nextState; // 生成新的vnode 返回點2 return this.render(); } } // 不需要重新生成vnode 返回點3 return NO_RENDER; } } ~~~ ## 2.2 助手函數 ~~~ // 獲取文檔當前焦點節點 function getActiveNode() { return document.activeElement; } // 設置文檔當前焦點節點 function resetActiveNode(activeNode) { if (activeNode !== document.body && document.activeElement !== activeNode) { activeNode.focus(); } } // state的更新合并 function queueStateChanges(component, newState, callback) { // 將newstate注冊到_pendingState for (let stateKey in newState) { component._pendingState[stateKey] = newState[stateKey]; } // 檢查state是否可以刷新 if (!component._pendingSetState) { component._pendingSetState = true; applyState(component, false, callback); } else { component.state = Object.assign({}, component.state, component._pendingState); component._pendingState = {}; } } // state的更新刷新 function applyState(component, force, callback) { if ((!component._deferSetState || force) && !component._blockRender) { component._pendingSetState = false; // 合并state const pendingState = component._pendingState; const prevState = component.state; const nextState = Object.assign({}, prevState, pendingState); // 獲取props const props = component.props; // 合并后的state component._pendingState = {}; // 生成新的vnode let nextNode = component._updateComponent(prevState, nextState, props, props, force); // 檢查nextNode的NO_RENDER,false返回值 if (nextNode === NO_RENDER) { // nextNode注冊為lastNode, nextNode = component._lastNode; } else if (isNullOrUndefined(nextNode)) { // 已注銷狀態下重新掛載 // nextNode注冊為待掛載節點 nextNode = createVPlaceholder(); } // 獲取緩存的dom節點lastNode, // 掛載父dome節點 parentDom const lastNode = component._lastNode; const parentDom = lastNode.dom.parentNode; // 獲取activeNode,subLifecycle const activeNode = getActiveNode(); const subLifecycle = new Lifecycle(); // 掛載刷新 component._patch(lastNode, nextNode, parentDom, subLifecycle, component.context, component, null); // _lastNode, 緩存本次生成的dom階段 // _componentToDOMNodeMap compon ent與掛載dom對應 // _parentNode, 掛載的父dom節點 component._lastNode = nextNode; component._componentToDOMNodeMap.set(component, nextNode.dom); component._parentNode.dom = nextNode.dom; // props/state刷新后回調 component.componentDidUpdate(props, prevState); // 調用注冊的事件接口 subLifecycle.trigger(); // 回調callback if (!isNullOrUndefined(callback)) { callback(); } // 設置焦點 resetActiveNode(activeNode); } } ~~~ # 3 模塊總結 * Component包含由props,state生成的界面元素 * props通常是嵌套父級傳遞的數據 * state通常是界面操作生成的數據 * Component包含一系列生命周期接口 * ComponentWillMount() mount()前回調 * ComponentDidMount() mount()后回調 * ComponentWillUpdate() state更新前回調 * ComponentDidUpdate() state更新后回調 * ComponentWillReceiveProps() props更新前回調