12、React Hooks、Reducer与组件性能优化全解析

React Hooks、Reducer与组件性能优化全解析

1. React Hooks的使用与规则

1.1 useJazzyNews 钩子的优化

在处理新闻帖子时， useJazzyNews 钩子进行了一些调整。最初的 const [posts, setPosts] 被重命名为 const [_posts, setPosts] ，然后每次 _posts 改变时会计算新的 posts 值。为了在每次有新帖子时播放提示音，添加了如下效果：

useEffect(() => { 
    welcomeChime.play(); 
    return () => goodbyeChime.play(); 
}, []); 

当新闻源中有新帖子添加时，该钩子会重新调用， _posts 反映新帖子， posts 会被重新计算，并且由于该效果依赖于 posts ，提示音会在 posts 改变时播放。

1.2 useLayoutEffect 的使用时机

在 React 中，渲染总是先于 useEffect 执行。不过，还有另一种效果钩子 useLayoutEffect ，它在渲染周期的特定时刻被调用，具