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

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 (
    

      {
        loading ? 
加载中......
 :
          messages.length === 0 ? 
没有信息, {user.name}
 :
            

              {messages.map(message =>  onSelectMessage(message)} />)}
            
      }
    
  )
}

const Message = ({ message, onClick }) => (
  

    
{message.subject}
  
)

export default MessageList

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