AntdUI组件库

随着商业化的趋势，企业级产品中需求多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
常见的 U|组件库:Ant Design，Material Ul等

1. 安装AntdUI组件库

Ant Design v4版本的维护期已于2023年年底正式结束, 我们可以不指定版本直接安装最新V5版本。除了安装antd之外，往往还需要使用阿里开发的图标库，配合使用：

npm i antd 
npm i @ant-design/icons

antd默认支持基于ES modules的tree shaking，也就是说antd默认支持按需加载。不像Vue中需要配置按需加载。

import { Button } from 'antd'
import { PlusCircleFilled } from '@ant-design/icons'

function App() {

  return (
    <div>
      hello App
      <Button type='primary' icon={<PlusCircleFilled/>}>按钮</Button>
    </div>
  )
}

export default App

运行效果：

2. 使用Message组件

Message有两种使用方式：

1. 使用messageApi
2. 直接使用message

2.1 使用messageApi

官网示例提供的写法就是messageApi:

// message不是组件，提供了静态方法
import { Button, message } from 'antd'
import { PlusCircleFilled } from '@ant-design/icons'

function App() {
  // messageApi用于输出内容, contextHolder用于指定挂靠DOM的位置
  const [messageApi, contextHolder] = message.useMessage();
  const handleClick = () => {
    messageApi.info("Hello, Ant Design!")
  }
  return (
    <div>
      hello App
      {contextHolder}
      <Button type='primary' icon={<PlusCircleFilled/>} onClick={handleClick}>弹出消息</Button>
    </div>
  )
}
export default App

运行效果：

2.2 直接使用message

还有一种更简洁的写法，不使用message的钩子函数：

// message不是组件，提供了静态方法
import { Button, message } from 'antd'
import { PlusCircleFilled } from '@ant-design/icons'

function App() {
  const handleClick = () => {
    message.info("Hello, Ant Design!")
  }
  return (
    <div>
      hello App
      <Button type='primary' icon={<PlusCircleFilled/>} onClick={handleClick}>弹出消息</Button>
    </div>
  )
}

export default App

运行效果：
为何提供了简单的写法，还要提供使用messageApi复杂写法呢。原因在于跨组件通信的时候，有可能在弹消息拿不到消息：

import { createContext, useContext } from 'react'
import { Button, message } from 'antd'
import { PlusCircleFilled } from '@ant-design/icons'

function Title() {
  const msg = useContext(Context)
  console.log('msg', msg)
  return (
    <h3>{msg}</h3>
  )
}
const Context = createContext('')

function Head() {
  const handleClick = () => {
    message.info(<Title />)
    // messageApi.info(<Title />)
  }
  return (
    <>
      hello App
      <Button type="primary" icon={<PlusCircleFilled />} onClick={handleClick}>弹出消息</Button>
    </>
  )
}

function App() {
  return (
    <Context.Provider value="hello">
      <Head/>
    </Context.Provider>
  )
}

export default App

运行效果：
可以看到弹窗拿不到Title组件的内容，这时候就需要messageApi来实现：

import { createContext, useContext } from 'react'
import { Button, message } from 'antd'
import { PlusCircleFilled } from '@ant-design/icons'

function Title() {
  const msg = useContext(Context)
  console.log('msg', msg)
  return (
    <h3>{msg}</h3>
  )
}
const Context = createContext('')

function Head() {
  const [messageApi, contextHolder] = message.useMessage()
  const handleClick = () => {
    messageApi.info(<Title />)
  }
  return (
    <>
      {contextHolder}
      hello App
      <Button type="primary" icon={<PlusCircleFilled />} onClick={handleClick}>弹出消息</Button>
    </>
  )
}

function App() {
  return (
    <Context.Provider value="hello">
      <Head/>
    </Context.Provider>
  )
}
export default App

3. 使用App包裹组件

好在Antd提供最终解决办法，可以简便而没有问题的使用message组件-App包裹组件，提供message.xxx、Modal.xxx、notification.xxx的静态方法，可以简化useMessage等方法需要手动植入contextHolder的问题。

import { createContext, useContext } from 'react'
// 避免重名，App名称改为AppComponent
import { Button, App as AppComponent} from 'antd'
import { PlusCircleFilled } from '@ant-design/icons'

function Title() {
  const msg = useContext(Context)
  console.log('msg', msg)
  return (
    <h3>{msg}</h3>
  )
}

const Context = createContext('')

function Head() {
  const {message} = AppComponent.useApp()
  const handleClick = () => {
    message.info(<Title />)
  }
  return (
    <>
      hello App
      <Button type="primary" icon={<PlusCircleFilled />} onClick={handleClick}>弹出消息</Button>
    </>
  )
}

function App() {

  return (
    <Context.Provider value="hello">
      {/*使用AppComponent组件包裹一下，由Antd提供message能力*/}
      <AppComponent>
        <Head/>
      </AppComponent>
    </Context.Provider>
  )
}
export default App

运行效果：