媒介

熟习 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(
                <div className="line">
                    <span className="top" style={ compStyle.lineStyle }></span>
                    <span className="bottom" style={ compStyle.lineStyle }></span>
                </div>
            );
        }
        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 (
            <div className={ loaddingClasses } style={ compStyle.loaddingStyle }>
                {lines}
                <div className="loadding-center" style={ compStyle.centerStyle }></div>
            </div>

        );
    }

});

末了，下面是基础的 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;
}