react实现点赞

React 实现点赞功能

在 React 中实现点赞功能通常涉及状态管理、事件处理和 UI 更新。以下是几种常见的实现方式：

使用 useState 管理点赞状态

import React, { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);
  const [likeCount, setLikeCount] = useState(0);

  const handleLike = () => {
    setLiked(!liked);
    setLikeCount(liked ? likeCount - 1 : likeCount + 1);
  };

  return (
    <div>
      <button onClick={handleLike}>
        {liked ? 'Unlike' : 'Like'}
      </button>
      <span>{likeCount} likes</span>
    </div>
  );
}

使用 useReducer 管理复杂状态

当点赞逻辑更复杂时，可以使用 useReducer：

import React, { useReducer } from 'react';

function likeReducer(state, action) {
  switch (action.type) {
    case 'TOGGLE_LIKE':
      return {
        ...state,
        liked: !state.liked,
        likeCount: state.liked ? state.likeCount - 1 : state.likeCount + 1
      };
    default:
      return state;
  }
}

function LikeButton() {
  const [state, dispatch] = useReducer(likeReducer, {
    liked: false,
    likeCount: 0
  });

  return (
    <div>
      <button onClick={() => dispatch({ type: 'TOGGLE_LIKE' })}>
        {state.liked ? 'Unlike' : 'Like'}
      </button>
      <span>{state.likeCount} likes</span>
    </div>
  );
}

结合后端 API 调用

实际应用中通常需要将点赞状态保存到后端：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  const [likeCount, setLikeCount] = useState(0);

  useEffect(() => {
    const fetchLikeStatus = async () => {
      const response = await axios.get(`/api/posts/${postId}/likes`);
      setLiked(response.data.liked);
      setLikeCount(response.data.likeCount);
    };
    fetchLikeStatus();
  }, [postId]);

  const handleLike = async () => {
    try {
      if (liked) {
        await axios.delete(`/api/posts/${postId}/likes`);
        setLikeCount(likeCount - 1);
      } else {
        await axios.post(`/api/posts/${postId}/likes`);
        setLikeCount(likeCount + 1);
      }
      setLiked(!liked);
    } catch (error) {
      console.error('Error updating like:', error);
    }
  };

  return (
    <div>
      <button onClick={handleLike}>
        {liked ? 'Unlike' : 'Like'}
      </button>
      <span>{likeCount} likes</span>
    </div>
  );
}

添加动画效果

可以使用 CSS 或动画库增强用户体验：

import React, { useState } from 'react';
import './LikeButton.css';

function LikeButton() {
  const [liked, setLiked] = useState(false);
  const [animating, setAnimating] = useState(false);

  const handleLike = () => {
    setLiked(!liked);
    setAnimating(true);
    setTimeout(() => setAnimating(false), 1000);
  };

  return (
    <div>
      <button 
        onClick={handleLike}
        className={`like-button ${liked ? 'liked' : ''} ${animating ? 'animate' : ''}`}
      >
        {liked ? '❤️' : '♡'}
      </button>
    </div>
  );
}

配套 CSS:

.like-button {
  transition: all 0.3s ease;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.like-button.liked {
  color: red;
}

.like-button.animate {
  transform: scale(1.2);
}

防抖处理

防止用户快速多次点击：

import React, { useState } from 'react';
import { debounce } from 'lodash';

function LikeButton() {
  const [liked, setLiked] = useState(false);

  const debouncedHandleLike = debounce(() => {
    setLiked(!liked);
  }, 300);

  return (
    <div>
      <button onClick={debouncedHandleLike}>
        {liked ? 'Unlike' : 'Like'}
      </button>
    </div>
  );
}

这些方法可以根据具体需求组合使用，构建出适合项目的点赞功能。