在create-react-app创建的React项目中引入第三方JS库的问题

嘿，我来帮你理清楚在create-react-app项目里引入这类第三方JS库的正确姿势～

首先要确认你已经通过包管理工具安装了这些依赖：

# npm
npm install pace-progress perfect-scrollbar --save

# 或者 yarn
yarn add pace-progress perfect-scrollbar

接下来分两个库分别说明正确的引入和使用方式：

1. 处理 pace-progress #

你当前的引入方式其实已经对了一半，但pace-progress需要配套的CSS才能正常显示进度条，所以要补充样式引入：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 可选：提前配置pace的全局参数（比如自定义主题、监听规则）
window.paceOptions = {
  theme: 'blue', // 对应主题样式的名称
  ajax: true,    // 是否监听AJAX请求
  document: false // 是否监听整个文档加载
};

// 引入pace的核心JS
import 'pace-progress';
// 引入对应主题的CSS（主题文件在node_modules/pace-progress/themes/目录下）
import 'pace-progress/themes/blue/pace-theme-minimal.css';

import App from './App/AppContainer.bs';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

pace-progress是全局自动运行的库，只要引入JS和CSS，它就会自动监听页面的加载/请求事件，不需要手动初始化，非常省心。

2. 处理 perfect-scrollbar #

这个库和pace不同，它需要绑定到具体的DOM元素上才能生效，而且要配合React的生命周期来管理实例，避免内存泄漏：

在函数组件中使用： #

import React, { useEffect, useRef } from 'react';
import PerfectScrollbar from 'perfect-scrollbar';
import 'perfect-scrollbar/css/perfect-scrollbar.css';

const ScrollableBox = () => {
  // 创建ref指向要添加滚动效果的容器
  const scrollContainer = useRef(null);

  useEffect(() => {
    const container = scrollContainer.current;
    if (container) {
      // 初始化perfect-scrollbar实例
      const psInstance = new PerfectScrollbar(container);
      // 组件卸载时销毁实例
      return () => psInstance.destroy();
    }
  }, []);

  return (
    // 容器必须设置固定高度/最大高度，且overflow设为hidden
    <div 
      ref={scrollContainer}
      style={{ height: '400px', overflow: 'hidden', border: '1px solid #eee' }}
    >
      {/* 这里放需要滚动的长内容 */}
      <div style={{ height: '1200px', padding: '1rem' }}>
        这是可以滚动的内容...<br/>
        重复内容占位<br/>
        重复内容占位<br/>
        重复内容占位<br/>
      </div>
    </div>
  );
};

export default ScrollableBox;

在类组件中使用： #

import React, { Component } from 'react';
import PerfectScrollbar from 'perfect-scrollbar';
import 'perfect-scrollbar/css/perfect-scrollbar.css';

class ScrollableBox extends Component {
  constructor(props) {
    super(props);
    this.scrollContainer = React.createRef();
    this.psInstance = null;
  }

  componentDidMount() {
    const container = this.scrollContainer.current;
    if (container) {
      this.psInstance = new PerfectScrollbar(container);
    }
  }

  componentWillUnmount() {
    if (this.psInstance) {
      this.psInstance.destroy();
    }
  }

  render() {
    return (
      <div 
        ref={this.scrollContainer}
        style={{ height: '400px', overflow: 'hidden', border: '1px solid #eee' }}
      >
        <div style={{ height: '1200px', padding: '1rem' }}>
          这是可以滚动的内容...<br/>
          重复内容占位<br/>
          重复内容占位<br/>
          重复内容占位<br/>
        </div>
      </div>
    );
  }
}

export default ScrollableBox;

总结一下两类库的引入逻辑： #

• 全局自动型库（如pace-progress）：在入口文件（index.js）引入JS+CSS即可，必要时提前配置全局参数。
• DOM绑定型库（如perfect-scrollbar）：在需要使用的组件内引入，利用React生命周期完成实例的创建和销毁，确保和React的DOM更新机制兼容。

内容的提问来源于stack exchange，提问作者softshipper