固釘其實按照我自己的理解就是用固定定位將其定位到某個位置。很簡單的乙個效果。
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()
從這段**可以看到的是引用了resizeobserver,這個元件的功能就是在改變寬度和高度的時候,會觸發,做的事情就很簡單,初始化狀態和固定樣式和佔位樣式,頁面的元素就恢復到最初了。
在看初始化做了什麼
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();
}
頁面載入建立了乙個定時器並且在window上新增了乙個滾動監聽事件addobservetarget
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;
}
拿我們傳遞了offsettop=20舉例, 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 ...