组件库介绍

前端UI组件
按钮”、“输入框”、“下拉选择”都是组件组件和组件组合就变成了一个更复杂的组件

各类组件库

组件库使用

快速上手

引入组件库

npm i @arco-design/web-react

基础使用

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";

ReactDOM.render(
    <Button type="primary">Hello Arco</Button>,
    document.querySelector("#root")
);

按需引入

安装按需加载插件 babel-plugin-import

yarn add babel-plugin-import -D

修改 Babel配置，引入插件

plugins:[
[
    'babel-plugin-import!',
    {
        libraryName: '@arco-design/web-react',
        libraryDirectory:'es',
        camel2DashComponentName: false,
        style: true，//样式按需加载
    },
],
[
    'babel-plugin-import'，// 图标库按需加载
    {
        libraryName:@arco-design/web-react/icon',
        libraryDirectory:react-icon',
        camel2DashComponentName: false,
    },
],
];

主题定制

通过C55进行样式覆盖

修改 Less变量

在 less 文件里修改

@import '@arco-design/web-react/dist/css/index.less'
@arcoblue-6: #b52828;

webpack.config.js

module.exports = {
    rules:[{
        test: /\.less$/,
        use:[{
            loader: 'style-loader',
        },{
            loader:'css-loader',
        },{
            loader:'less-loader',
            options:{
                modifyVars:'arcoblue-6':'#b52828',
                },
                javascriptEnabled: true
            },
        }],
    }],
}

暗黑模式

总结

相信大家看了以上的介绍，对于组件和组件库的基本使用有了一定的了解，不过我对于项目自己封装的组件比较感兴趣但也是不太了解的部分，所以查阅了文章，做出以下其他方面介绍

组件

(1) 函数组件

如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
    {props.value}
    </button>
  );
}

(2) React.Component

shouldComponentUpdate 仅检查了 props.color 或 state.count 是否改变。如果这些值没有改变，那么这个组件不会更新

class CounterButton extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }
}

(3) PureComponent

如果你的组件更复杂一些，你可以使用类似“浅比较”的模式来检查 props 和 state 中所有的字段，以此来决定是否组件需要更新。React 已经提供了一位好帮手来帮你实现这种常见的模式 - 你只要继承 React.PureComponent 就行了。

class CounterButton extends React.PureComponent {}

大部分情况下，你可以使用 React.PureComponent 来代替手写 shouldComponentUpdate。但它只进行浅比较 （例如：1 == 1或者ture==true，数组和对象引用是否相同），所以当 props 或者 state 某种程度是可变的话，浅比较会有遗漏，那你就不能使用它了。

不要在props和state中改变对象和数组，如果你在你的父组件中改变对象，你的PureComponent将不会更新。虽然值已经被改变，但是子组件比较的是之前props的引用是否相同，所以不会检测到不同。

因此，你可以通过使用es6的assign方法或者数组的扩展运算符或者使用第三方库，强制返回一个新的对象。

当数据结构很复杂时，情况会变得麻烦，存在性能问题。（比较原始值和对象引用是低耗时操作。如果你有一列子对象并且其中一个子对象更新，对它们的props和state进行检查要比重新渲染每一个子节点要快的多。）

(4) 何时使用Component 或 PureComponent ?

<1> 当组件是独立的，组件在页面中的个数为1或2的，组件有很多props、state，并且当中还有些是数组和对象的，组件需要每次都渲染的，使用Component

<2> 当组件经常作为子组件，作为列表，组件在页面中数量众多，组件props, state属性少，并且属性中基本没有数组和对象，组件不需要每次都渲染，只有变化了才渲染，使用PureComponent

凭主观，我觉得以下组件适合Component

Button
Input

以下组件适合PureComponent

Radio
Checkbox
Option

高阶组件

高阶组件可以看作React对装饰模式的一种实现，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。

高阶组件（HOC）是React中的高级技术，用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由React自身的组合性质必然产生的。

function visible(WrappedComponent) {
  return class extends Component {
    render() {
      const { visible, ...props } = this.props;
      if (visible === false) return null;
      return <WrappedComponent {...props} />;
    }
  }
}
复制代码

上面的代码就是一个HOC的简单应用，函数接收一个组件作为参数，并返回一个新组件，新组建可以接收一个visible props，根据visible的值来判断是否渲染Visible。

以上是关于组件的一些简单介绍，要深入了解可以看以下相关文章
【React深入】从Mixin到HOC再到Hook - 掘金 (juejin.cn)
React组件纯组件函数组件高阶组件 - 掘金 (juejin.cn)

组件库的使用和自定义组件