react点赞实现

实现React点赞功能

使用React实现点赞功能可以通过状态管理、事件处理和UI反馈来完成。以下是几种常见的实现方式：

使用useState管理点赞状态

import React, { useState } from 'react';

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

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

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

使用useReducer管理复杂状态

import React, { useReducer } from 'react';

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

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

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

添加动画效果

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

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

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

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

对应的CSS样式：

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

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

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

与后端API交互

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

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

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

  const handleLike = async () => {
    try {
      const response = liked
        ? await axios.delete(`/api/posts/${postId}/likes`)
        : await axios.post(`/api/posts/${postId}/likes`);

      setLiked(response.data.liked);
      setCount(response.data.count);
    } catch (error) {
      console.error('Error updating like:', error);
    }
  };

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

使用自定义Hook封装逻辑

import { useState } from 'react';

function useLike(initialLiked = false, initialCount = 0) {
  const [liked, setLiked] = useState(initialLiked);
  const [count, setCount] = useState(initialCount);

  const toggleLike = () => {
    setLiked(!liked);
    setCount(liked ? count - 1 : count + 1);
  };

  return { liked, count, toggleLike };
}

function LikeButton() {
  const { liked, count, toggleLike } = useLike();

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

以上实现方式可以根据具体需求选择使用，从简单的前端状态管理到与后端API交互的完整解决方案。