怎么用react实现消息显示器

发布时间：2022-08-26 10:12:35 作者：iii
来源：亿速云阅读：141

怎么用React实现消息显示器

在现代Web应用程序中，消息显示器是一个常见的功能。它可以用于显示通知、聊天消息、系统日志等。React强大的前端库，提供了构建用户界面的灵活性和高效性。本文将详细介绍如何使用React实现一个消息显示器，涵盖从基础概念到高级功能的实现。

项目初始化

首先，我们需要创建一个新的React项目。如果你还没有安装create-react-app，可以通过以下命令安装：

npm install -g create-react-app

然后，创建一个新的React项目：

npx create-react-app message-display
cd message-display

接下来，启动开发服务器：

npm start

现在，你已经有了一个基本的React项目结构。

组件结构设计

在实现消息显示器之前，我们需要设计组件的结构。一个典型的消息显示器可能包含以下组件：

MessageDisplay: 主组件，负责管理消息的状态和逻辑。
MessageList: 显示消息列表的组件。
MessageItem: 显示单个消息的组件。
MessageInput: 输入新消息的组件。
MessageFilter: 过滤消息的组件。

我们将逐步实现这些组件。

消息显示器的基本实现

1. 创建MessageDisplay组件

首先，我们创建一个MessageDisplay组件，它将作为消息显示器的主组件。

import React, { useState } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';

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

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  return (
    <div className="message-display">
      <MessageList messages={messages} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

2. 创建MessageList组件

MessageList组件负责显示消息列表。

import React from 'react';
import MessageItem from './MessageItem';

const MessageList = ({ messages }) => {
  return (
    <div className="message-list">
      {messages.map((message) => (
        <MessageItem key={message.id} message={message} />
      ))}
    </div>
  );
};

export default MessageList;

3. 创建MessageItem组件

MessageItem组件负责显示单个消息。

import React from 'react';

const MessageItem = ({ message }) => {
  return (
    <div className="message-item">
      <span className="message-text">{message.text}</span>
      <span className="message-timestamp">{message.timestamp}</span>
    </div>
  );
};

export default MessageItem;

4. 创建MessageInput组件

MessageInput组件负责输入新消息。

import React, { useState } from 'react';

const MessageInput = ({ addMessage }) => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      addMessage(inputValue);
      setInputValue('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter a message"
      />
      <button type="submit">Send</button>
    </form>
  );
};

export default MessageInput;

5. 使用MessageDisplay组件

最后，在App.js中使用MessageDisplay组件。

import React from 'react';
import MessageDisplay from './MessageDisplay';

function App() {
  return (
    <div className="App">
      <MessageDisplay />
    </div>
  );
}

export default App;

现在，你已经实现了一个基本的消息显示器。用户可以输入消息，消息会显示在列表中。

消息的添加与删除

1. 添加消息

我们已经实现了消息的添加功能。用户可以通过MessageInput组件输入消息，消息会被添加到MessageDisplay组件的messages状态中。

2. 删除消息

接下来，我们实现消息的删除功能。我们可以在MessageItem组件中添加一个删除按钮，并在MessageDisplay组件中处理删除逻辑。

首先，修改MessageItem组件：

import React from 'react';

const MessageItem = ({ message, deleteMessage }) => {
  return (
    <div className="message-item">
      <span className="message-text">{message.text}</span>
      <span className="message-timestamp">{message.timestamp}</span>
      <button onClick={() => deleteMessage(message.id)}>Delete</button>
    </div>
  );
};

export default MessageItem;

然后，修改MessageList组件：

import React from 'react';
import MessageItem from './MessageItem';

const MessageList = ({ messages, deleteMessage }) => {
  return (
    <div className="message-list">
      {messages.map((message) => (
        <MessageItem key={message.id} message={message} deleteMessage={deleteMessage} />
      ))}
    </div>
  );
};

export default MessageList;

最后，在MessageDisplay组件中添加删除逻辑：

import React, { useState } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';

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

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter((message) => message.id !== id));
  };

  return (
    <div className="message-display">
      <MessageList messages={messages} deleteMessage={deleteMessage} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

现在，用户可以删除消息了。

消息的样式与动画

1. 添加样式

我们可以为消息显示器添加一些基本的样式。在src目录下创建一个styles.css文件，并添加以下样式：

.message-display {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.message-list {
  margin-bottom: 20px;
}

.message-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.message-item:last-child {
  border-bottom: none;
}

.message-text {
  flex: 1;
  margin-right: 10px;
}

.message-timestamp {
  font-size: 0.8em;
  color: #666;
}

button {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #ff1a1a;
}

form {
  display: flex;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

button[type="submit"] {
  background-color: #4caf50;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

然后，在App.js中引入样式文件：

import React from 'react';
import MessageDisplay from './MessageDisplay';
import './styles.css';

function App() {
  return (
    <div className="App">
      <MessageDisplay />
    </div>
  );
}

export default App;

2. 添加动画

我们可以使用react-transition-group库为消息添加动画效果。首先，安装react-transition-group：

npm install react-transition-group

然后，修改MessageList组件以支持动画：

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import MessageItem from './MessageItem';
import './styles.css';

const MessageList = ({ messages, deleteMessage }) => {
  return (
    <TransitionGroup className="message-list">
      {messages.map((message) => (
        <CSSTransition key={message.id} timeout={300} classNames="message">
          <MessageItem message={message} deleteMessage={deleteMessage} />
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
};

export default MessageList;

接下来，在styles.css中添加动画样式：

.message-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.message-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.message-exit {
  opacity: 1;
  transform: translateY(0);
}

.message-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 300ms, transform 300ms;
}

现在，当消息被添加或删除时，会有平滑的动画效果。

消息的持久化

为了让消息在页面刷新后仍然存在，我们可以将消息存储在浏览器的localStorage中。

1. 保存消息到localStorage

首先，修改MessageDisplay组件以保存消息到localStorage：

import React, { useState, useEffect } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';

const MessageDisplay = () => {
  const [messages, setMessages] = useState(() => {
    const savedMessages = localStorage.getItem('messages');
    return savedMessages ? JSON.parse(savedMessages) : [];
  });

  useEffect(() => {
    localStorage.setItem('messages', JSON.stringify(messages));
  }, [messages]);

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter((message) => message.id !== id));
  };

  return (
    <div className="message-display">
      <MessageList messages={messages} deleteMessage={deleteMessage} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

2. 从localStorage加载消息

在上面的代码中，我们使用useEffect钩子将消息保存到localStorage中。当组件首次加载时，我们从localStorage中读取消息并初始化状态。

现在，即使页面刷新，消息也会被保留。

消息的过滤与搜索

1. 添加过滤功能

我们可以添加一个过滤功能，允许用户根据消息内容过滤消息。首先，创建一个MessageFilter组件：

import React, { useState } from 'react';

const MessageFilter = ({ filterMessages }) => {
  const [filterText, setFilterText] = useState('');

  const handleFilterChange = (e) => {
    setFilterText(e.target.value);
    filterMessages(e.target.value);
  };

  return (
    <div className="message-filter">
      <input
        type="text"
        value={filterText}
        onChange={handleFilterChange}
        placeholder="Filter messages"
      />
    </div>
  );
};

export default MessageFilter;

然后，在MessageDisplay组件中添加过滤逻辑：

import React, { useState, useEffect } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';
import MessageFilter from './MessageFilter';

const MessageDisplay = () => {
  const [messages, setMessages] = useState(() => {
    const savedMessages = localStorage.getItem('messages');
    return savedMessages ? JSON.parse(savedMessages) : [];
  });
  const [filteredMessages, setFilteredMessages] = useState(messages);

  useEffect(() => {
    localStorage.setItem('messages', JSON.stringify(messages));
    setFilteredMessages(messages);
  }, [messages]);

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter((message) => message.id !== id));
  };

  const filterMessages = (text) => {
    setFilteredMessages(messages.filter((message) => message.text.includes(text)));
  };

  return (
    <div className="message-display">
      <MessageFilter filterMessages={filterMessages} />
      <MessageList messages={filteredMessages} deleteMessage={deleteMessage} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

2. 添加搜索功能

我们还可以添加一个搜索功能，允许用户搜索消息。我们可以使用MessageFilter组件来实现这一点。只需在MessageFilter组件中添加一个搜索按钮，并在MessageDisplay组件中处理搜索逻辑。

消息的通知功能

1. 添加通知功能

我们可以使用浏览器的Notification API来显示消息通知。首先，检查浏览器是否支持Notification API：

import React, { useState, useEffect } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';
import MessageFilter from './MessageFilter';

const MessageDisplay = () => {
  const [messages, setMessages] = useState(() => {
    const savedMessages = localStorage.getItem('messages');
    return savedMessages ? JSON.parse(savedMessages) : [];
  });
  const [filteredMessages, setFilteredMessages] = useState(messages);

  useEffect(() => {
    localStorage.setItem('messages', JSON.stringify(messages));
    setFilteredMessages(messages);
  }, [messages]);

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);

    if (Notification.permission === 'granted') {
      new Notification('New Message', {
        body: text,
      });
    } else if (Notification.permission !== 'denied') {
      Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
          new Notification('New Message', {
            body: text,
          });
        }
      });
    }
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter((message) => message.id !== id));
  };

  const filterMessages = (text) => {
    setFilteredMessages(messages.filter((message) => message.text.includes(text)));
  };

  return (
    <div className="message-display">
      <MessageFilter filterMessages={filterMessages} />
      <MessageList messages={filteredMessages} deleteMessage={deleteMessage} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

2. 请求通知权限

在上面的代码中，我们首先检查用户是否已经授予通知权限。如果没有，我们会请求权限。如果用户授予权限，我们将显示通知。

性能优化

1. 使用React.memo

我们可以使用React.memo来优化MessageItem组件的性能，避免不必要的重新渲染。

import React from 'react';

const MessageItem = React.memo(({ message, deleteMessage }) => {
  return (
    <div className="message-item">
      <span className="message-text">{message.text}</span>
      <span className="message-timestamp">{message.timestamp}</span>
      <button onClick={() => deleteMessage(message.id)}>Delete</button>
    </div>
  );
});

export default MessageItem;

2. 使用useCallback

我们可以使用useCallback来优化deleteMessage函数的性能，避免不必要的重新创建。

”`jsx import React, { useState, useEffect, useCallback } from ‘react’; import MessageList from ‘./MessageList’; import MessageInput from ‘./MessageInput’; import MessageFilter from ‘./MessageFilter’;

const MessageDisplay = () => { const [messages, setMessages] = useState(() => { const savedMessages = localStorage.getItem(‘messages’); return savedMessages ? JSON.parse(savedMessages) : []; }); const [filteredMessages, setFilteredMessages] = useState(messages);

useEffect(() => { localStorage.setItem(‘messages’, JSON.stringify(messages)); setFilteredMessages(messages); }, [messages]);

const addMessage = (text) => { const newMessage = { id: Date.now(), text, timestamp: new Date().toLocaleTimeString(), }; setMessages([…messages, newMessage]);

if (Notification.permission === 'granted') {
  new Notification('New Message', {
    body: text,
  });
} else if (Notification.permission !== 'denied') {
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      new Notification('New Message', {
        body: text,
      });
    }
  });
}

};

const deleteMessage = useCallback((id) => { setMessages((prevMessages) => prevMessages.filter((message) => message.id !== id)); }, []);

const filterMessages = (text) => { setFilteredMessages(messages.filter((message) => message.text.includes(text))); };

return (