使用React Context进行状态管理（八）在函数组件中使用

React Hooks可以让我们完全抛弃类组件，让我们彻底完全函数化。其中的useContext就是用来在函数组件中使用Context的。

我们以MessageList组件为例来看看具体怎么使用。

import React, { useContext } from 'react'
import { UserContext } from './UserContext'
import { MessageContext } from './MessageContext'

const MessageList = () => {
  const { user } = useContext(UserContext)
  const { loading, messages, onSelectMessage } = useContext(MessageContext)
  return (
    <div>
      {
        loading ? <div>加载中......</div> :
          messages.length === 0 ? <div>没有信息, {user.name}</div> :
            <ul>
              {messages.map(message => <Message key={message.id} message={message} onClick={() => onSelectMessage(message)} />)}
            </ul>
      }
    </div>
  )
}

const Message = ({ message, onClick }) => (
  <li onClick={onClick}>
    <div>{message.subject}</div>
  </li>
)

export default MessageList

首先引入useContext，然后在return之前使用useContext解构UserContext和MessageContext，最后删掉JSX中的Consumer。是不是比之前的两层嵌套Consumer漂亮多了？(注意改写UserContext和MessageContext，导出整个Context变量)