资讯专栏INFORMATION COLUMN

React 组件开发入门

imccl / 2459人阅读

摘要:实现中间圆心基本样式容器元件样式圆心样式生成动画元件元件个数,定制个数元件元素集合生成组件自己的样式模拟渲染基本动画元件的,控制交互最后,下面是基本的不考虑不支持的情况,不支持都不用开发,直接用图,性价比更高里面用到的一个混淆方法

前言

熟悉 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;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78202.html

相关文章

  • react入门学习笔记(一)

    摘要:选择的主要原因大概是因为该框架出现较早,感觉上会相对成熟,日后学习中遇到问题想要查找答案相对简单一些,对,就是这么简单。多说无益,接下来开始的学习,我按照我学习中带着的问题来一一解答,完成我的入门笔记。主要是针对前端的组件化开发。 这两天得空,特意来折腾了以下时下火热的前端框架react,至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论,也就不妄加评论了...

    leon 评论0 收藏0
  • ReactJs入门教程

    摘要:组件关注的只应该是状态,不同的状态呈现不同的表现形式。组件一切都是组件倡导开发者将切分成一个个组件从而达到松耦合及重用的目的。只不过的命名是进入状态之前跟进入状态之后。 前端已不止于前端-ReactJs初体验 原文写于 2015-04-15 https://github.com/kuitos/kuitos.github.io/issues/21 要说2015年前端届最备受瞩目的技术是啥...

    bingo 评论0 收藏0
  • React 入门实践

    摘要:更多相关介绍请看这特点仅仅只是虚拟最大限度减少与的交互类似于使用操作单向数据流很大程度减少了重复代码的使用组件化可组合一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。在使用后,就变得很容易维护,而且数据流非常清晰,容易解决遇到的。 欢迎移步我的博客阅读:《React 入门实践》 在写这篇文章之前,我已经接触 React 有大半年了。在初步学习 React 之后就正式应用到项...

    shenhualong 评论0 收藏0
  • 适合React及前端开发入门的小项目推荐

    摘要:最近刚进入公司实习,找工作的过程中发现还是基础比较重要吧。分享一些关于前端开发入门和入门的小项目小任务吧。百度前端技术学院的任务其实能把百度前端技术学院的任务做完就很不错啦,这里推荐几个比较好的任务。可以学到前端工程化和入门的相关知识。 最近刚进入公司实习,找工作的过程中发现还是基础比较重要吧。分享一些关于前端开发入门和React入门的小项目(小任务)吧。 百度前端技术学院的任务 其实...

    Vicky 评论0 收藏0
  • React 可视化开发工具 Shadow Widget 非正经入门(之六:markdown)

    摘要:使用的构件是类构件,在嵌入转义标签的首层节点要求是非行内构件,类类类均可。现在把界面设计可视化了,未经编程训练的普通人也能通过拖入样板创建组件,再修改组件属性来设计界面,所以,这项改进具有重大现实意义。 本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点。本篇讲解 Markdown 在 Shadow Widget 中的应用。 showImg(https://se...

    gplane 评论0 收藏0

发表评论

0条评论

imccl

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<