antd原始碼 Affix固釘解析

固釘其實按照我自己的理解就是用固定定位將其定位到某個位置。很簡單的乙個效果。

antd-affix我認為其核心可以概括為幾點：

元件載入滾動監聽，元件銷毀銷毀監聽。

利用乙個元素在原本元素位置佔位。當達到固定元素的條件。元素佔位，反之。相反。

監聽佔位元素、寬度高度樣式的更改，有更改就去重置渲染引數條件。

render函式

render()  = this.state;

console.log("affixstyle",this.state)
let props = omit(this.props, ['offsettop', 'offsetbottom', 'target', 'onchange']);
const =this.props;
const affixclassname = classnames(
,classname
);return (
}>
}>)}
preparemeasure = () => );
};updateposition()

在看初始化做了什麼

componentdidmount() = this.props;

console.log(target)
if (target) );}}
componentdidupdate(prevprops:affixprops) = this.state;
const = this.props;
let newtarget = null;
if (target) 
if (prevtarget !== newtarget) 
this.setstate();
}if (
prevprops.offsettop !== this.props.offsettop ||
prevprops.offsetbottom !== this.props.offsetbottom
) this.measure();
}lazyupdateposition() = this.props;
const = this.state;
// check position change before measure to make safari smooth
if (target && affixstyle) }}
// directly call prepare measure since it's already throttled.
this.preparemeasure();
}

addobservetarget函式內部，呼叫了當前元件的lazyupdateposition，去計算出fixedtop的值是否達到offsettop，達到了就直接返回。沒達到就重置。

而this.setstate操作都會牽動componentdidmount執行。最後都會去執行 this.measure();

measure

measure = () =>  = this.state;

const = this.props;
if (status !== affixstatus.prepare || !this.fixednode || !this.placeholdernode || !target) 
const offsettop = this.getoffsettop();
const offsetbottom = this.getoffsetbottom();
const targetnode = target();
if (!targetnode) 
const newstate: partial= ;
const targetrect = gettargetrect(targetnode);
const placeholderreact = gettargetrect(this.placeholdernode);
const fixedtop = getfixedtop(placeholderreact, targetrect, offsettop);
const fixedbottom = getfixedbottom(placeholderreact, targetrect, offsetbottom);
if (fixedtop !== undefined) ;
newstate.placeholderstyle = ;
} else if (fixedbottom !== undefined) ;
newstate.placeholderstyle = ;
}newstate.lastaffix = !!newstate.affixstyle;
if (onchange && lastaffix !== newstate.lastaffix) 
this.setstate(newstate as affixstate);
};export function gettargetrect(target: bindelement): clientrect as clientrect);
}export function getfixedtop(
placeholderreact: rect,
targetrect: rect,
offsettop: number | undefined,
) return undefined;
}

azkaban web server原始碼解析

azkaban主要用於hadoop相關job任務的排程，但也可以應用任何需要排程管理的任務，可以完全代替crontab。azkaban主要分為web server 任務上傳，管理，排程 executor server 接受web server的排程指令，進行任務執行 1.資料表 projects 工...

JDK LinkedHashMap原始碼解析

今天來分析一下jdk linkedhashmap的源 public class linkedhashmapextends hashmapimplements map可以看到,linkedhashmap繼承自hashmap,並且也實現了map介面,所以linkedhashmap沿用了hashmap的大...

antd原始碼解讀（4） ButtonGroup

這個元件沒有重點可以說，畢竟就只是乙個將button元件包裹起來的乙個容器，但是這裡還是有乙個點可以值得一提 這裡的react.sfc是 typescript 的對於 react 的statelesscomponent的乙個inte ce的乙個別稱 那麼對於stateless functional ...