我们知道Windows系统右下角有弹窗通知，Mac系统右上角有弹窗通知，iPhone有顶部通知，Android有底部通知。如果我们想在React App中也实现这样的功能，用Context再合适不过了。为什么合适？Context的出现不就是为了解决共享状态管理吗？通知功能恰恰不就是所有组件都共有的一个功能吗？难不成你在每个组件都写一个通知组件？
二话不说，创建NotificationContext。
import React from 'react'
const { Provider, Consumer } = React.createContext()
class NotificationProvider extends React.Component {
state = {
messages: []
}
addMessage = text => {
this.setState(state => ({
messages: [
...state.messages,
{
id: Math.random(),
text
}
]
}))
}
removeMessage = message => {
this.setState(state => ({
messages: state.messages.filter(msg => (
msg.id !== message.id
))
}))
}
render() {
return (
<Provider value={{
...this.state,
notify: this.addMessage
}}>
<div className="notification-wrapper">
<ul>
{this.state.messages.map(message => (
<Notification
key={message.id}
message={message}
onClose={() => this.removeMessage(message)}
>
</Notification>
))}
</ul>
{this.props.children}
</div>
</Provider>
)
}
}
const Notification = ({ message, onClose }) => (
<li>
{message.text}
<button className="close" onClick={onClose}>关闭</button>
</li>
)
我们看到NotificationContext有messages状态变量用来存储消息对象，addMessage函数用来添加新消息，removeMessage函数用来移除一条消息。Notification组件用来封装消息的展示，包含消息内容和一个关闭按钮。
为了模拟新消息，我们在helper.js中添加一个getLatestMessages的函数。
export function getLatestMessages() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(
Messages.map(msg => ({
...msg,
id: Math.random()
})).slice(
0,
1
)
);
}, 1000);
});
}
这里用slice来获取一个只含有一条信息的数组。
然后我们来看下MessageContext.js。
componentDidMount() {
this.setState({ loading: true, error: null })
getMessages()
.then(messages => this.setState({ loading: false, messages }))
.catch(error => this.setState({ loading: false, error }))
//模拟新消息到来
this.newMessageInterval = setInterval(this.newMessage, 5000)
}
获取完所有的消息后，每个5秒我们调用刚才helper中的产生新消息函数，逻辑被封装在了newMessage函数中。
newMessage = () => {
if (!this.state.loading) {
getLatestMessages()
.then(message => {
this.setState(state => ({ messages: state.messages.concat(message) }))
this.props.notify(`有一条新消息`)
})
}
}
当有新消息时，我们就把它添加到现有的消息列表中，并调用显示通知的函数notify。notify函数即NotificationProvider中的addMessage函数，这个函数是以属性的方式传递给MessageProvider组件的。但这里我们没有用NotificationConsumer来传递函数给MessageProvider，而是使用高阶组件的方式。NotificationContext最终代码如下。
import React from 'react'
const { Provider, Consumer } = React.createContext()
class NotificationProvider extends React.Component {
state = {
messages: []
}
addMessage = text => {
this.setState(state => ({
messages: [
...state.messages,
{
id: Math.random(),
text,
}
]
}))
}
removeMessage = message => {
this.setState(state => ({
messages: state.messages.filter(msg => (
msg.id !== message.id
))
}))
}
render() {
return (
<Provider value={{
...this.state,
notify: this.addMessage
}}>
<div>
<ul>
{this.state.messages.map(message => (
<Notification
key={message.id}
message={message}
onClose={() => this.removeMessage(message)}
>
</Notification>
))}
</ul>
{this.props.children}
</div>
</Provider>
)
}
}
const Notification = ({ message, onClose }) => (
<li>
{message.text}
<button onClick={onClose}>关闭</button>
</li>
)
//这里是新加的代码
function withNotifier(Component) {
return function Notified(props) {
return (
<Consumer>
{
({ notify }) => (
<Component {...props} notify={notify} />
)
}
</Consumer>
)
}
}
export { NotificationProvider, Consumer as NotificationConsumer, withNotifier }
在MessageContext导入withNotifier函数后，最终代码如下。
import React from 'react'
import { getMessages, getLatestMessages } from './helper'
import { withNotifier } from './NotificationContext'
const { Provider, Consumer } = React.createContext()
class MessageProvider extends React.Component {
state = {
messages: [],
currentMessage: null,
error: null,
loading: false
}
componentDidMount() {
this.setState({ loading: true, error: null })
getMessages()
.then(messages => this.setState({ loading: false, messages }))
.catch(error => this.setState({ loading: false, error }))
this.newMessageInterval = setInterval(this.newMessage, 5000)
}
componentWillUnmount() {
clearInterval(this.newMessage)
}
selectMessageHandler = (message) => {
this.setState({ currentMessage: message })
}
newMessage = () => {
if (!this.state.loading) {
getLatestMessages()
.then(message => {
this.setState(state => ({ messages: state.messages.concat(message) }))
this.props.notify(`有一条新消息`)
})
}
}
render() {
return (
<Provider value={{
...this.state,
onSelectMessage: this.selectMessageHandler
}}>{this.props.children}</Provider>
)
}
}
//这里是新添加的内容
const MessageWithNotifierProvider = withNotifier(MessageProvider)
export { MessageWithNotifierProvider as MessageProvider, Consumer as MessageConsumer }
我们看到在新添加的内容中，使用了withNotifier函数，MessageProvider作为参数，函数返回的则是带有notify属性也就是把NotificationProvider中的addMessage函数传递到了MessageProvider中。
最后在ReactDOM.render函数中加入NotificationProvider组件，作为根组件。
ReactDOM.render(
<NotificationProvider>
<UserProvider>
<MessageProvider>
<App />
</MessageProvider>
</UserProvider>
</NotificationProvider>,
document.getElementById('root')
);
这样，一个带有全局通知功能的App就完成了。
