1、概述

这一章，我们继续来学习一个比较复杂的实践案例。我们将会使用 context 来实现一个通知系统，当用户点击按钮时，会弹出一条通知，通知会显示在页面的右下角，并且会自动消失。

在理论知识上，没有新的内容出现，主要是普及一下不同类型的应用场景。因此，这一章的内容是一个课后练习作业

先自己思考如何实现
然后使用自己实现的代码与下面提供的代码进行对比学习

预览

Command Center

Global Event Bus via Context

index.tsx

context.tsx

toast-container.tsx

control-panel.tsx

01import NotificationProvider from './context';
02import ToastContainer from './toast-container';
03import ControlPanel from './control-panel';
04
05export default function App() {
06  return (
07    <NotificationProvider>
08      <div className="bg-neutral-900 flex flex-col items-center justify-center p-4">
09        <div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>
10        
11        <div className="mb-12 text-center z-10">
12          <h1 className="text-white text-5xl font-black uppercase tracking-[0.2em] mb-2">Command Center</h1>
13          <div className="text-neutral-500 font-mono text-sm">Global Event Bus via Context</div>
14        </div>
15
16        <ControlPanel />
17        <ToastContainer />
18      </div>
19    </NotificationProvider>
20  );
21}

实践：基于 Context 实现 Tab 切换

useImperativeHandle

专栏首页

到顶

专栏目录

Table of Contents

1、概述

Command Center