在React中集成第三方库和插件方式

npm install react-datepicker

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
    />
  );
}

import React, { useRef, useEffect } from 'react';
import $ from 'jquery';

const SliderComponent = ({ items }) => {
  const sliderRef = useRef(null);

  useEffect(() => {
    $(sliderRef.current).slick({
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    });

    return () => {
      $(sliderRef.current).slick('destroy'); // 清理副作用
    };
  }, []);

  return (
    <div ref={sliderRef}>
      {items.map((item) => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
};

export default SliderComponent;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

useEffect(() => {
  window.jQuery('#myElement').slideUp();
}, []);

import { debounce } from 'lodash';

useEffect(() => {
  // 初始化第三方库
  return () => {
    // 清理工作
  };
}, []);

import React, { Suspense } from 'react';

const LazyLibraryComponent = React.lazy(() => import('library-name'));

const MyComponent = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyLibraryComponent />
  </Suspense>
);