前端Notice通知组件的实战开发与常见坑点解析

优化前：卡得不行

说真的，之前我们的 Notice 通知组件简直是噩梦。每次加载页面的时候，那个通知组件都卡得要命，用户反馈说体验特别差。最夸张的一次，加载时间竟然到了5秒多，这简直不能忍啊。

找到瘼颈了！

我开始怀疑是不是代码写的太烂了，于是先用 Chrome 的开发者工具（F12）来定位问题。一打开性能分析，果然发现了一些问题。首先，我发现每次加载页面时，组件的渲染时间特别长。其次，发现有一些不必要的 DOM 操作和重绘。

具体来说，我用了 Chrome DevTools 的 Performance 面板，记录了一次加载过程，发现主要问题集中在以下几个方面：

• 大量重复渲染：每次数据更新都会触发整个组件的重新渲染。
• DOM 操作频繁：每次渲染都会触发大量的 DOM 操作，导致性能下降。
• 请求数据阻塞：API 请求数据的过程中，页面处于阻塞状态。

优化后：流畅多了

经过一番折腾，终于找到了几个优化方案，试了几种之后，最后这个效果最好。下面分享一下具体的优化方法。

1. 减少重复渲染

首先，我使用了 React 的 React.memo 和 useMemo 来减少不必要的渲染。原来的代码是这样的：

const Notice = ({ messages }) => {
  return (
    <div>
      {messages.map((message, index) => (
        <div key={index} className="notice-item">
          {message}
        </div>
      ))}
    </div>
  );
};

优化后的代码是这样的：

const NoticeItem = React.memo(({ message }) => {
  return <div className="notice-item">{message}</div>;
});

const Notice = React.memo(({ messages }) => {
  const memoizedMessages = useMemo(() => messages, [messages]);

  return (
    <div>
      {memoizedMessages.map((message, index) => (
        <NoticeItem key={index} message={message} />
      ))}
    </div>
  );
});

通过 React.memo 和 useMemo，我们减少了不必要的渲染，提高了性能。

2. 优化 DOM 操作

接下来，我尽量减少 DOM 操作，特别是那些不必要的操作。原来的代码中，每次消息更新都会重新渲染整个组件，现在我改成了只更新变化的部分。原来的代码是这样的：

const NoticeContainer = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    fetch('https://jztheme.com/api/messages')
      .then(response => response.json())
      .then(data => setMessages(data))
      .catch(error => console.error('Error fetching messages:', error));
  }, []);

  return <Notice messages={messages} />;
};

优化后的代码是这样的：

const NoticeContainer = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    let isMounted = true;

    const fetchData = async () => {
      try {
        const response = await fetch('https://jztheme.com/api/messages');
        const data = await response.json();
        if (isMounted) {
          setMessages(prevMessages => [...prevMessages, ...data]);
        }
      } catch (error) {
        console.error('Error fetching messages:', error);
      }
    };

    fetchData();

    return () => {
      isMounted = false;
    };
  }, []);

  return <Notice messages={messages} />;
};

通过这种方式，我们只在新的消息到来时更新消息列表，而不是每次都重新渲染整个组件。

3. 异步加载数据

最后，我将 API 请求改为了异步加载，并在数据加载过程中显示一个加载中的提示。这样可以避免页面在数据加载时卡顿。原来的代码是这样的：

const NoticeContainer = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    fetch('https://jztheme.com/api/messages')
      .then(response => response.json())
      .then(data => setMessages(data))
      .catch(error => console.error('Error fetching messages:', error));
  }, []);

  return <Notice messages={messages} />;
};

优化后的代码是这样的：

const NoticeContainer = () => {
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jztheme.com/api/messages');
        const data = await response.json();
        setMessages(data);
      } catch (error) {
        console.error('Error fetching messages:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return <Notice messages={messages} />;
};

通过这种方式，用户在数据加载过程中可以看到一个加载中的提示，提高了用户体验。

性能数据对比

优化前，加载时间大约是5秒多，优化后，加载时间降到了800毫秒左右。具体数据如下：

• 优化前：平均加载时间 5.2 秒
• 优化后：平均加载时间 0.8 秒

虽然还有一些小问题，但总体上已经大大提升了性能。希望这些经验能对你有帮助。

总结

以上就是我对 Notice 通知组件的优化经验。通过减少重复渲染、优化 DOM 操作和异步加载数据，我们成功地提升了组件的性能。如果你有更好的优化方案，欢迎在评论区交流。