wiz-components

目录

• 概述
• 安装
• 使用
• 许可证
• 技术栈
• [基础组件的封装](#基础组件的封装)

概述

wiz-components是wizlong的组件库，主要存放基础组件。组件来源目前有两种，一部分是封装了Ant Design的部分组件，另外一部分是由自己封装的组件。

安装

npm install git+https://givtlab.wizlong.com/sgm/wiz-components.git

使用

    import { WizNotice,WizAlert,WizSpin } from 'wiz-components'
    
    //WizNotice[key]({ message, description });
    WizNotice.info('基本信息！');
    WizNotice.success({message:'成功了', description:'成功了！'});
    
    //WizAlert
    <WizAlert message="Success Text" type="success" />

    //WizSpin
    <WizSpin />

许可证

MIT Copyright (c) 2018 - forever Naufal Rabbani

技术栈

• Ant Design

组件的封装

组件化是React中的重要概念，React提供了Component作为基础组件，它实现了React生命周期方法、class 属性(defaultProps、displayName)、实例属性(props、state)及其他api。wiz-components对其进行了封装，优化了一些方法及功能，它的名字叫WizComponent。

#####1. 组件名称 componentName 使用WizComponent时需要定义 component的名称。

#####2. React生命周期方法shouldComponentUpdate的封装 WizComponent对生命周期的shouldComponentUpdate方法进行了封装=>propsAndStateOnChange，优化了实例属性发生变化时的性能优化。 ######propsAndStateOnChange使用方法

    //对所需要的实例属性进行监听
    propsAndStateOnChange = {
        listen: this._listen.bind(this)
    }

    //监听方法，入参与shouldComponentUpdate的相同
    _list(nextProps,nextState){
        //do something
    }