React-3-组件

一、组件基本

1.傻瓜组件和聪明组件

傻瓜组件：也叫做展示组件，根据props显示页面信息。

聪明组件：也叫做容器组件，会在这个组件中进行数据获取，并将数据传递给傻瓜组件。

把这两种组件分离可以分工明确，提高重用性和可读性，便于测试和维护。

2.函数式组件

函数式组件是一种无状态的组件，是为了创建展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。

组件不会被实例化，整体渲染性能得到提升。

组件不能访问this。

组件无法访问生命周期方法。

无状态组件只能访问输入的props。

// 这种写法可以将组件暴露给其他地方使用
export default function xxx() {
    return (
        <div></div>
    )
}
// 这种写法只能在当前的js文件中使用
function xxx() {
    return (
        <div></div>
    )
}

3.class组件

import {Component} from 'react'
export default class xxx extends Component () {
    return (
        <div></div>
    )
}

4.条件渲染 

可以通过  a && <b>的方式条件渲染，因为如果a为真则会返回b，如果a为false则会返回a。

5.事件绑定

①在构造函数中用bind绑定事件，这样会导致子组件重新渲染，但是可以传入参数

②定义事件函数为箭头函数，这样不会导致子组件重新渲染，但是不能传递参数，只能接收默认的时间对象e

③定义事件函数为普通函数，但是绑定时通过箭头函数绑定，这样可以兼顾①②的优点。

二、ant-design组件库

1.安装

npm install antd --save 

2.引入

import { Button } from 'antd'

三、性能优化之PureComponent

举个例子：一个容器组件里有两个展示组件，分别是A和B，A传入属性title，B传入属性count，当改变容器的count时，A和B都会重新加载，这样性能就会有问题。

方法一：用shouldComponentUpdate判断一下A传入的属性是否有变化，如果有变化才返回true。

方法二：A组件用PureComponent创建，这样会自动比较该组件传入的参数是否发生了变化，如果发生变化才会更新。

四、性能优化之React.memo

可以让函数式组件也有PureComponent功能

const MemoComponent = React.Memo((props) => {
    return <div>{props.title}</div>
})

五、组件复合写法

function Son() {
    return (
        <div>{props.count}</div>
        {props.children}
    )
}

function Father() {
    const count = 1
    return (
        <Son footer={count}>
            <div>111</div>
            <p>222</p>
        </Son>
    )
}

六、高阶组件（HOC   Hight-Order Component）

1.高阶组件介绍

抽离出具有相同逻辑的组件，其实是一个函数，类似于Python的装饰器，可以给某个组件传入一些额外的参数并重写生命周期。

注意：高阶组件一般以with命名开头（非强制）

import React, { Component } from 'react'

const withLearnReact = (Comp) => {
    const newComponent = (props) => {
        return <Comp {...props} title='小殷'></Comp>
    }
    return newComponent
}

class HOC extends Component {
    render() {
        return (
            <div>
                {this.props.title}  //title就是高阶组件传入的额外参数
            </div>
        )
    }
}
export default withLearnReact(HOC)

2.高阶组件链式调用

高阶组件有两个作用：①添加额外属性  ②重写生命周期

如果只是用于添加属性，则写成函数式就行，但是如果要重写生命周期就需要写成class，链式调用就是分别写两个高阶组件实现以上功能，再进行调用。

import React, { Component } from 'react'

const withLearnReact = (Comp) => {
    const newComponent = (props) => {
        return <Comp {...props} name='小殷'></Comp>
    }
    return newComponent
}
const withLifeCycle = (Comp) => {
    class newComponent extends Component {
        // 重写生命周期
        componentDidMount() {
            console.log("重写了生命周期")
        }

        render() {
            return <Comp {...this.props}></Comp>
        }
    }
    return newComponent
}
class HOC extends Component {
    render() {
        return (
            <div>
                <div>{this.props.title}</div>
                <div>{this.props.name}</div>
            </div>
        )
    }
}
export default withLifeCycle(withLearnReact(HOC))

3.高阶组件装饰器写法

上面的链式调用非常混乱，所以可以用装饰器的写法来简化（ES7）

①安装支持装饰器写法的babel编译插件

②修改配置文件

七、组件通信之上下文context

上下文context有两个角色，provider数据提供，consumer数据读取。

使用context可以避免通过props传递，保存在context中的数据整个组件树都可以使用。

import React, { Component } from 'react'

const store = {
    name: "yin"
}

const Context = React.createContext()
const {Provider, Consumer} = Context

class Context2 extends Component {
    render() {
        return (
            <Consumer>
              {
                  store => {
                    return <div>{store.name}</div>
                  }
              }
            </Consumer>
        )
    }
}

function Middle() {
  return <Context2></Context2>
}

export default class Context1 extends Component {
    render() {
        return (
            <Provider value={store}>
                <Middle></Middle>
            </Provider>
        )
    }
}