摘要：這個組件是一個圖釘組件，使用的布局，讓組件固定在窗口的某一個位置上，并且可以在到達指定位置的時候才去固定。

這個組件是一個圖釘組件，使用的fixed布局，讓組件固定在窗口的某一個位置上，并且可以在到達指定位置的時候才去固定。

還是老樣子，看一個組件首先我們先來看看他可以傳入什么參數(shù)

  // Affix
  export interface AffixProps {
    /**
    * 距離窗口頂部達到指定偏移量后觸發(fā)
    */
    offsetTop?: number;
    offset?: number;
    /** 距離窗口底部達到指定偏移量后觸發(fā) */
    offsetBottom?: number;
    style?: React.CSSProperties;
    /** 固定狀態(tài)改變時觸發(fā)的回調(diào)函數(shù) */
    onChange?: (affixed?: boolean) => void;
    /** 設置 Affix 需要監(jiān)聽其滾動事件的元素，值為一個返回對應 DOM 元素的函數(shù) */
    target?: () => Window | HTMLElement;
    // class樣式命名空間，可以定義自己的樣式命名
    prefixCls?: string;
  }

看完傳入?yún)?shù)之后，就到入口函數(shù)看看這里用到了什么參數(shù)

  render() {
    // 構造當前組件的class樣式
    const className = classNames({
      [this.props.prefixCls || "ant-affix"]: this.state.affixStyle,
    });
    // 這里和之前看的一樣，忽略掉props中的在div標簽上面不需要的一些屬性
    // 但是貌似沒有去掉offset，后面我還查了一下DIV上面能不能有offset
    // 但是沒看見有offset，只看見offsetLeft, offsetHeight....
    const props = omit(this.props, ["prefixCls", "offsetTop", "offsetBottom", "target", "onChange"]);
    const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
    return (
      // 注意咯 看這里placeholder的作用了 如圖
      // 這里的placeholder的作用是當這個組件樣式變?yōu)閒ixed的時候，
      // 會脫離文檔流，然后導致原本的dom結構變化，寬高都會有所變化
      // 所以這是后放一個占位元素來頂住這一組件脫離文檔流的時候的影響
      

        

          {this.props.children}
        
      
    );
  }

  import React from "react";
  import ReactDOM from "react-dom";
  import PropTypes from "prop-types";
  import addEventListener from "rc-util/lib/Dom/addEventListener";
  import classNames from "classnames";
  import shallowequal from "shallowequal";
  import omit from "omit.js";
  import getScroll from "../_util/getScroll";
  import { throttleByAnimationFrameDecorator } from "../_util/throttleByAnimationFrame";

  function getTargetRect(target): ClientRect {
    return target !== window ?
      target.getBoundingClientRect() :
      { top: 0, left: 0, bottom: 0 };
  }

  function getOffset(element: HTMLElement, target) {
    const elemRect = element.getBoundingClientRect();
    const targetRect = getTargetRect(target);

    const scrollTop = getScroll(target, true);
    const scrollLeft = getScroll(target, false);

    const docElem = window.document.body;
    const clientTop = docElem.clientTop || 0;
    const clientLeft = docElem.clientLeft || 0;

    return {
      top: elemRect.top - targetRect.top +
        scrollTop - clientTop,
      left: elemRect.left - targetRect.left +
        scrollLeft - clientLeft,
      width: elemRect.width,
      height: elemRect.height,
    };
  }

  function noop() {}

  function getDefaultTarget() {
    return typeof window !== "undefined" ?
      window : null;
  }

  // Affix
  export interface AffixProps {
    /**
    * 距離窗口頂部達到指定偏移量后觸發(fā)
    */
    offsetTop?: number;
    offset?: number;
    /** 距離窗口底部達到指定偏移量后觸發(fā) */
    offsetBottom?: number;
    style?: React.CSSProperties;
    /** 固定狀態(tài)改變時觸發(fā)的回調(diào)函數(shù) */
    onChange?: (affixed?: boolean) => void;
    /** 設置 Affix 需要監(jiān)聽其滾動事件的元素，值為一個返回對應 DOM 元素的函數(shù) */
    target?: () => Window | HTMLElement;
    prefixCls?: string;
  }

  export default class Affix extends React.Component {
    static propTypes = {
      offsetTop: PropTypes.number,
      offsetBottom: PropTypes.number,
      target: PropTypes.func,
    };

    scrollEvent: any;
    resizeEvent: any;
    timeout: any;
    refs: {
      fixedNode: HTMLElement;
    };

    events = [
      "resize",
      "scroll",
      "touchstart",
      "touchmove",
      "touchend",
      "pageshow",
      "load",
    ];

    eventHandlers = {};

    constructor(props) {
      super(props);
      this.state = {
        affixStyle: null,
        placeholderStyle: null,
      };
    }

    setAffixStyle(e, affixStyle) {
      const { onChange = noop, target = getDefaultTarget } = this.props;
      const originalAffixStyle = this.state.affixStyle;
      const isWindow = target() === window;
      if (e.type === "scroll" && originalAffixStyle && affixStyle && isWindow) {
        return;
      }
      if (shallowequal(affixStyle, originalAffixStyle)) {
        return;
      }
      this.setState({ affixStyle }, () => {
        const affixed = !!this.state.affixStyle;
        if ((affixStyle && !originalAffixStyle) ||
            (!affixStyle && originalAffixStyle)) {
          onChange(affixed);
        }
      });
    }

    setPlaceholderStyle(placeholderStyle) {
      const originalPlaceholderStyle = this.state.placeholderStyle;
      if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
        return;
      }
      this.setState({ placeholderStyle });
    }

    @throttleByAnimationFrameDecorator()
    updatePosition(e) {
      let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
      const targetNode = target();

      // Backwards support
      offsetTop = offsetTop || offset;
      const scrollTop = getScroll(targetNode, true);
      const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
      const elemOffset = getOffset(affixNode, targetNode);
      const elemSize = {
        width: this.refs.fixedNode.offsetWidth,
        height: this.refs.fixedNode.offsetHeight,
      };

      const offsetMode = {
        top: false,
        bottom: false,
      };
      // Default to `offsetTop=0`.
      if (typeof offsetTop !== "number" && typeof offsetBottom !== "number") {
        offsetMode.top = true;
        offsetTop = 0;
      } else {
        offsetMode.top = typeof offsetTop === "number";
        offsetMode.bottom = typeof offsetBottom === "number";
      }

      const targetRect = getTargetRect(targetNode);
      const targetInnerHeight =
        (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
      if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
        // Fixed Top
        const width = elemOffset.width;
        this.setAffixStyle(e, {
          position: "fixed",
          top: targetRect.top + (offsetTop as number),
          left: targetRect.left + elemOffset.left,
          width,
        });
        this.setPlaceholderStyle({
          width,
          height: elemSize.height,
        });
      } else if (
        scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
          offsetMode.bottom
      ) {
        // Fixed Bottom
        const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
        const width = elemOffset.width;
        this.setAffixStyle(e, {
          position: "fixed",
          bottom: targetBottomOffet + (offsetBottom as number),
          left: targetRect.left + elemOffset.left,
          width,
        });
        this.setPlaceholderStyle({
          width,
          height: elemOffset.height,
        });
      } else {
        const { affixStyle } = this.state;
        if (e.type === "resize" && affixStyle && affixStyle.position === "fixed" && affixNode.offsetWidth) {
          this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth });
        } else {
          this.setAffixStyle(e, null);
        }
        this.setPlaceholderStyle(null);
      }
    }

    componentDidMount() {
      const target = this.props.target || getDefaultTarget;
      // Wait for parent component ref has its value
      this.timeout = setTimeout(() => {
        this.setTargetEventListeners(target);
      });
    }

    componentWillReceiveProps(nextProps) {
      if (this.props.target !== nextProps.target) {
        this.clearEventListeners();
        this.setTargetEventListeners(nextProps.target);

        // Mock Event object.
        this.updatePosition({});
      }
    }

    componentWillUnmount() {
      this.clearEventListeners();
      clearTimeout(this.timeout);
      (this.updatePosition as any).cancel();
    }

    setTargetEventListeners(getTarget) {
      const target = getTarget();
      if (!target) {
        return;
      }
      this.clearEventListeners();

      this.events.forEach(eventName => {
        this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
      });
    }

    clearEventListeners() {
      this.events.forEach(eventName => {
        const handler = this.eventHandlers[eventName];
        if (handler && handler.remove) {
          handler.remove();
        }
      });
    }

    render() {
      const className = classNames({
        [this.props.prefixCls || "ant-affix"]: this.state.affixStyle,
      });

      const props = omit(this.props, ["prefixCls", "offsetTop", "offsetBottom", "target", "onChange"]);
      const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
      return (
        

          

            {this.props.children}
          
        
      );
    }
  }