React第四章 组件化和UI库引入

第一节、引入使用ant-design组件库

1、官网 Antd中国

2、引入安装ant-design: npm install antd --save

3、基本使用：避免全局加载 模块 和 样式文件。

4、在 create-react-app 中使用

第二节、ant-design按需加载

1、加yarn add react-app-rewired customize-cra babel-plugin-import

2、改package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
 },

3、根目录建config-overrides.js

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

第三节、性能优化-PureComponent使用

1、pureComponent 是内部定制了shouldComponentUpdate生命周期的Component

1.1、他重写了一个方法来替换shouldComponentUpdate生命周期。

1.2、纯粹的组件：后续 props的属性基本不变化，render不更新时使用。

2、平时开发过程中设计组件能用PureComponent的，推荐尽量使用，减少子组件不必要的render更新。

3、使用PureComponent原则。（PureComponent组件是对 props 属性的浅比较）。

3.1、确保数据类型是原始类型。

3.2、如果是引用类型，确保地址不变更，同时不应当有深层层变化。

4、使用PureComponent可以省去shouldComponentUpdate的生命周期的代码，代码会简单很多。

5、PureMemo.js

import React, { Component, PureComponent } from 'react'

// 问题：
// 如果不使用 shouldComponentUpdate, 父级state更新会导致组件render函数调用,
// 虽然 props.title没有发生变化
// 所以性能优化使用 shouldComponentUpdate 判断

// 方法一 不使用 PureComponent
class Title extends Component {
    shouldComponentUpdate(nextProps) {
        return nextProps.title !== this.props.title;
    }
    render() {
        console.log('pure使用：标题1组件被渲染');
        return (
            <div>
                标题：{this.props.title}
            </div>
        )
    }
}
// 方法二 使用 PureComponent
class Title2 extends PureComponent {
    render() {
        console.log('pure使用：标题2组件被渲染');
        return (
            <div>
                标题2：{this.props.title}
            </div>
        )
    }
}
class Count extends Component {
    render() {
        console.log('pure使用：数量组件被渲染');
        return (
            <div>
                数量：{this.props.count}
            </div>
        )
    }
}

export default class PureMemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: 'Start React PureComponent',
            count: 0,
        }
    }
    componentDidMount() {
        setInterval(() => {
            this.setState({
                count: this.state.count + 1
            })
        }, 2000);
    }
    render() {
        return (
            <div>
                <h4>PureComponent使用如下：</h4>
                <Title title={this.state.title}></Title>
                <Title2 title={this.state.title}></Title2>
                <Count count={this.state.count}></Count>
            </div>
        )
    }
}

第四节、性能优化-React.memo使用

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

2、React.memo让函数式组件 也有了 PureComponent 的功能。

const Title2 = React.memo((props) => {
    console.log('React.Memo：标题2组件')
    return <div>{props.title}</div>
})

3、RMemo.js

import React, { Component } from 'react'

// 使用 React.memo 包裹 变成 PureComponent
const Title2 = React.memo((props) => {
    console.log('React.Memo：标题2组件')
    return <div>{props.title}</div>
})
const Title1 = (props) => {
    console.log('React.Memo：标题1组件')
    return <div>{props.title}</div>
}
const Count = (props) => {
    console.log('React.Memo：数量组件');
    return <div>{props.count}</div>
}
export default class RMemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: 'Start React Memo',
            count: 0
        }
    }
    componentDidMount() {
        setInterval(() => {
            this.setState({
                count: this.state.count + 1
            })
        }, 2000);
    }
    render() {
        return (
            <div>
                <h4>React.memo使用如下：</h4>
                <Title1 title={this.state.title}></Title1>
                <Title2 title={this.state.title}></Title2>
                <Count count={this.state.count}></Count>
            </div>
        )
    }
}

第五节、React高级使用组件-复合写法

1、React官方说任何一种class继承实现的 都可以用组件复合实现。所以可以放心的使用。

2、组件复合使用类似vue框架中的组件插槽。

3、Slot.js

import React, { Component } from 'react'

function Dialog(props) {
    return (
        <div>
            <p>这是一个函数式组件-子组件</p>
            {/* 等同于vue中的匿名插槽 */}
            {props.children}
            {/* 等同于vue中的具名插槽 */}
            <div className="footer-dive">{props.footer}</div>
        </div>
    )
}

export default class Slot extends Component {
    render() {
        const footer = (
            <div>
                <span>这是一个变量slot的页脚</span>
                <button onClick={() => alert('react复合组件写法')}>事件触发</button>
            </div>
        )
        return (
            <div>
                <Dialog footer={footer}>
                    <p>复合组件内容、默认为props.children</p>
                    <p>可以是class组件</p>
                </Dialog>
            </div>
        )
    }
}