React组件化和UI库引入使用

引入ant-design组件库

npm install antd --save

yarn add antd --save

一、按需加载

加载全部的antd组件的样式（对前端性能有隐患）

需要对antd进行配置进行按需加载，需要对create-react-app的默认配置进行自定义

需要更改我们的启动插件

引入react-app-rewired并修改package.json里的启动配置。由于新的[email protected]版本的关系还要安装customize-cra

二、安装命令yarn add react-app-rewired customize-cra

更改package.json文件

然后在根目录创建一个config-overrides.js,用于修改默认配置，先不用写内容

执行安装babel-plugin-import插件（命令yarn add babel-plugin-import）

修改config-overrides.js文件内容如下

const {override,fixBabelImports}=require('customize-cra');
module.exports=override(
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        style:'css'
    })
)
import Button from 'antd'

三、性能优化PurComponent讲解

PurComponent是内部定制了shouldComponentUpdate生命周期的Component

它重写了一个方法来替换shouldComponentUpdate生命周期

平常开发过程设计组件能使用PurComponent都尽量使用

使用特性要记住两个小原则

确保数据类型是值类型

如果是引用类型，确保地址不变，同时不应当有深层次数据变化

使用PurComponent可以省Reac去shouldComponentUpdate生命周期的代码，代码还会简单很多

四、React.memo讲解

React.memo是一个高阶组件的写法

React.memo让函数组件也拥有PurComponent的功能

五、React高级使用之组件复合写法

React官方说任何一个能用组件继承实现的用组件复合都可以实现，所以可以放心使用

组件复合类似于我们在Vue框架里的组件插槽

funtion XdDialog(props){
    return(
        <div style={
   
   {border:'4px solid red'}}>
            {/*等于Vue中匿名插槽*/}
            {props.children}
            {/*等于Vue中具名插槽*/}
           <div className="ads">
            {props.footer}
            </div>
        </div>
    )
}
function WelcomeXdDialog（）{
    const fonfirmBtn=(<button onClick={()=>alert("确定？")}>确定</button>)
    return(
        <XdDialog color="green" footer={fonfirmBtn}>	
            <p>欢迎欢迎</p>
        </XdDialog>
    )
}

React组件化和UI库引入使用

猜你喜欢