我正在创建一个带有useState和useContext进行状态管理的反应应用程序。到目前为止，这就像一个魅力，但现在我遇到了一个需要类似事件的功能：
假设有一个内容页面，它呈现了很多内容片段。用户可以滚动浏览此内容并阅读内容。
还有一个书签页面。单击书签将打开内容页面并滚动到相应的内容。
此滚动到内容是一次性操作。 理想情况下，我希望在我的 ContentPage 中有一个使用ScrollTo(item)事件的事件侦听器。但是反应几乎可以阻止所有事件的使用。DOM 事件无法在虚拟 dom 中捕获，也无法创建自定义合成事件。
此外，命令"打开内容片段XYZ"可以来自组件树中的许多部分(该示例并不完全适合我尝试实现的内容(。一个只是在树上冒泡的事件并不能解决问题。
所以我想反应方式是以某种方式用应用程序状态表示此事件？
我有一个解决方法解决方案，但它很笨拙并且有问题(这就是我发布这个问题的原因(：
export interface MessageQueue{
messages: number[],
push:(num: number)=>void,
pop:()=>number
}
const defaultMessageQueue{
messages:[],
push: (num:number) => {throw new Error("don't use default");},
pop: () => {throw new Error("don't use default");}
}
export const MessageQueueContext = React.createContext<MessageQueue>(defaultMessageQueue);
在我提供的组件中：
const [messages, setmessages] = useState<number[]>([]);
//...
<MessageQueueContext.Provider value={{
messages: messages,
push:(num:number)=>{
setmessages([...messages, num]);
},
pop:()=>{
if(messages.length==0)return;
const message = messages[-1];
setmessages([...messages.slice(0, -1)]);
return message;
}
}}>
现在，任何需要发送或接收消息的组件都可以使用上下文。
推送消息按预期工作。上下文更改，使用它的所有组件都会重新呈现。
但是弹出消息也会更改上下文并导致重新呈现。第二次重新渲染是浪费的，因为没有理由这样做。
有没有一种干净的方法可以在使用 useState 和 useContext 进行状态管理的代码库中实现操作/消息/事件？
由于您在 Ionic 的路由器 (React-Router( 中使用路由，并且在两个页面之间导航，因此您可以使用 URL 将参数传递给页面：
定义具有可选路径参数的路由。类似content-page/:section?
在内容页面中，使用 React Router 的useParams获取参数(section(。创建一个仅将section作为唯一更改依赖项的useEffect。在第一次渲染时(或者如果section发生变化(，将调用滚动代码。
const { section } = useParams();
useEffect(() => {
// the code to jump to the section
}, [section]);
我不确定为什么你不能将document.dispatchEvent(new CustomEvent(((与关联的eventListener一起使用。 此外，如果是滚动问题，您可以使用 refs 滚动进入视图