摘要：實現中間圓心基本樣式容器元件樣式圓心樣式生成動畫元件元件個數，定制個數元件元素集合生成組件自己的樣式模擬渲染基本動畫元件的，控制交互最后，下面是基本的不考慮不支持的情況，不支持都不用開發，直接用圖，性價比更高里面用到的一個混淆方法

熟悉 React 的思想后，我們先來嘗試開發一個單純的小組件，可以對比一下是不是比以前的開發模式更加舒適了，這里我主要以一個 Loadding 組件來舉栗子，實現了幾個基本的功能：

一種類型的 loadding（菊花轉）

能夠設置 loadding 的三個屬性：width height color

能夠控制 loadding 的顯示和隱藏

其實對于一個簡單需求來說，這三個屬性已經很實用了。但是去網上看一些外國大神寫的組件，有一些不明白的地方，所以自己就慢慢搞，do it！

我想這樣用 loadding 組件：

所以我定義這個組件的基本結構如下：

var Loadding = React.createClass({
    // 控制組件屬性的類型
    propTypes: {},
    // 控制組件屬性的默認值
    getDefaultProps: function () {},
    // 組裝基本的內聯樣式
    getComponentStyle: function () {},
    // 渲染基本的組件，拆分 render 方法的粒度
    renderBaseComp: function () {},
    // 最終的渲染方法
    render: function () {}
});

這個組件中，我使用的 內聯樣式 來控制組件的內部基本樣式的穩定。其實有時候我們會覺得內聯樣式不好，但是我個人覺得每一種設置 CSS 形式的方法，用在合適的場景中就是正確的。

每部分的具體實現如下，代碼中有一些講解（這里我不會介紹具體 loadding 效果是怎么出來的，看代碼應該就會明白，主要介紹一個 react 制作簡單組件的思路和寫法）對于擴展性來說，

你還可以加入 className 和 type 這些修飾性的屬性，但是我更傾向于迭代式的組件開發，小組件就要具有良好的封閉性，使用接口簡單，大組件才考慮更好的魯棒性和可擴展性，這樣開發一個組件的性價比才高。需要注意對 getDefaultProps 的理解，只有當使用接口的人代碼中根本沒有寫那個屬性的時候，才會使用定義的默認值。

var Loadding = React.createClass({
    propTypes: {
        width: React.PropTypes.oneOfType([
            React.PropTypes.number,
            React.PropTypes.string
        ]),
        height: React.PropTypes.oneOfType([
            React.PropTypes.number,
            React.PropTypes.string
        ]),
        color: React.PropTypes.string,
        active: React.PropTypes.bool
    },
    getDefaultProps: function() {
        return {
            color: "#00be9c",
            height: 30,
            width: 30,
            active: false
        };
    },

    getComponentStyle: function() {
        var width = this.props.width,
            height = this.props.height,
            color = this.props.color;
        /* 中間圓心 */
        var cWidth = 0.4 * width,
            cHeight = 0.4 * height,
            cMarginLeft = -0.5 * cWidth,
            cMarginTop = -0.5 * cHeight;

        /* 基本樣式 */
        return {
            loaddingStyle: { // loadding 容器
                width: width,
                height: height
            },
            lineStyle: { // loadding 元件樣式
                background: color
            },
            centerStyle: { // loadding 圓心樣式
                width: cWidth,
                height: cHeight,
                marginLeft: cMarginLeft,
                marginTop: cMarginTop
            }
        };
    },

    renderBaseComp: function(compStyle) {
        /* 生成動畫元件 */
        var n = 4; // 元件個數，todo: 定制個數
        var lines = []; // 元件元素集合
        for (var i = 0; i < n; i++) {
            lines.push(
                

                    
                    
                
            );
        }
        return lines;
    },

    render: function() {
        /* 生成組件自己的樣式 */
        var compStyle = this.getComponentStyle();
        /* 模擬渲染基本動畫元件 */
        var lines = this.renderBaseComp(compStyle);

        // loadding 的class，控制交互
        var loaddingClasses = cx({
            loadding: true,
            active: this.props.active
        });

        return (
            

                {lines}
                

            

        );
    }

});

最后，下面是基本的 SASS（不考慮不支持的情況，不支持都不用開發，直接用圖，性價比更高）

@include keyframes(load) {
    0% {
        opacity: 0;
    }
    25% {
        opacity: .25;
    }
    50% {
        opacity: .5;
    }
    75% {
        opacity: .75;
    }
    100% {
        opacity: 1;
    }
}

.loadding {
    display: none;
    position: absolute;
    &.active {
        display: block;
    }
    .loadding-center {
        position: absolute;
        left: 0;
        top: 50%;
        background: #fff;
        border-radius: 50%;
    }
    .line {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        .top {
            content: "";
            display: block;
            width: 1px;
            font-size: 0;
            height: 50%;
        }
        .bottom {
            @extend .top;
        }
        @for $i from 1 through 4 {
            &:nth-child(#{$i}) {
                transform:rotate(45deg * ($i - 1));
                .top {
                    @include animation(load, 0.8s, linear, 0s, infinite);
                }
                .bottom {
                    @include animation(load, 0.8s, linear, 0.4s + $i/10, infinite);
                }
            }
        }
    }
}

里面用到的一個 animation 混淆方法：

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

@mixin animation ($name, $duration, $func, $delay, $count, $direction: normal) {
    -webkit-animation: $name $duration $func $delay $count $direction;
    -moz-animation: $name $duration $func $delay $count $direction;
    -o-animation: $name $duration $func $delay $count $direction;
    animation: $name $duration $func $delay $count $direction;
}