如何在React中正确运行第三方脚本？以Bitrix客服聊天脚本为例

How to Properly Integrate Third-Party Scripts (Like Bitrix Chat) into React & Vue Apps #

Great question! Your current implementation works, but there are cleaner, more maintainable approaches that align with reactive framework best practices. Let’s break down optimized solutions for both React and Vue, plus key best practices to follow.

First: Issues with Your Current React Implementation

Before diving into fixes, let’s note a couple of red flags in your existing code:

• You’re inserting the script into two places (this.instance div and the head), which can lead to duplicate script loads.
• The App component recursively renders itself (<App /> inside its own return), which will cause an infinite loop—definitely a typo that needs fixing!
• Using document.write is risky in reactive apps, as it can overwrite content if the script loads after the DOM is ready.

Optimized React Solution (Function Component with Hooks) #

Modern React favors function components and hooks, which make script integration cleaner and more predictable. This approach ensures the script loads only once, handles success/error states, and cleans up after itself.

import { useEffect, useRef } from 'react';

// Reusable Bitrix chat script component
const BitrixChat = () => {
  // Track if the script has already been loaded to avoid duplicates
  const isScriptLoaded = useRef(false);

  useEffect(() => {
    if (isScriptLoaded.current) return;

    // Create the script element
    const script = document.createElement('script');
    script.async = true;
    script.src = `https://someurl.js?${Math.floor(Date.now() / 60000)}`;

    // Handle successful script load
    script.onload = () => {
      console.log('Bitrix chat script loaded successfully');
      isScriptLoaded.current = true;
    };

    // Handle script load failures
    script.onerror = () => {
      console.error('Failed to load Bitrix chat script');
    };

    // Insert the script into the document head
    document.head.appendChild(script);

    // Cleanup: Remove the script when the component unmounts
    return () => {
      if (script.parentNode) {
        script.parentNode.removeChild(script);
        isScriptLoaded.current = false;
      }
    };
  }, []); // Empty dependency array ensures this runs only once on mount

  // This component doesn't need to render any UI
  return null;
};

// Use the component in your root App
const App = () => {
  return (
    <>
      {/* Your main app content goes here */}
      <BitrixChat />
    </>
  );
};

export default App;

Optimized Vue Solutions #

Vue’s lifecycle hooks make script integration straightforward too. Here’s how to do it for both Vue 3 (Composition API) and Vue 2 (Options API):

Vue 3 (Composition API)

<template>
  <!-- No UI needed for this component -->
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const isScriptLoaded = ref(false);
let scriptElement = null;

onMounted(() => {
  if (isScriptLoaded.value) return;

  scriptElement = document.createElement('script');
  scriptElement.async = true;
  scriptElement.src = `https://someurl.js?${Math.floor(Date.now() / 60000)}`;

  scriptElement.onload = () => {
    console.log('Bitrix chat script loaded');
    isScriptLoaded.value = true;
  };

  scriptElement.onerror = () => {
    console.error('Bitrix chat script failed to load');
  };

  document.head.appendChild(scriptElement);
});

onUnmounted(() => {
  if (scriptElement && scriptElement.parentNode) {
    scriptElement.parentNode.removeChild(scriptElement);
    isScriptLoaded.value = false;
  }
});
</script>

Vue 2 (Options API)

<template>
  <!-- No UI needed for this component -->
</template>

<script>
export default {
  data() {
    return {
      isScriptLoaded: false,
      scriptElement: null
    };
  },
  mounted() {
    if (this.isScriptLoaded) return;

    this.scriptElement = document.createElement('script');
    this.scriptElement.async = true;
    this.scriptElement.src = `https://someurl.js?${Math.floor(Date.now() / 60000)}`;

    this.scriptElement.onload = () => {
      console.log('Bitrix chat script loaded');
      this.isScriptLoaded = true;
    };

    this.scriptElement.onerror = () => {
      console.error('Bitrix chat script failed to load');
    };

    document.head.appendChild(this.scriptElement);
  },
  beforeDestroy() {
    if (this.scriptElement && this.scriptElement.parentNode) {
      this.scriptElement.parentNode.removeChild(this.scriptElement);
      this.isScriptLoaded = false;
    }
  }
};
</script>

Key Best Practices for All Reactive Apps #

1. Load scripts only once: Use refs or reactive state to track if the script has already been injected into the DOM—this prevents duplicate network requests and unexpected behavior.
2. Insert into <head>: Adding scripts to the document head is the standard approach and avoids cluttering your app’s DOM structure.
3. Handle load states: Always add onload and onerror handlers to debug issues and react to success/failure (e.g., show a fallback message if the chat fails to load).
4. Clean up resources: Remove the script when the component unmounts to prevent memory leaks, especially important in single-page apps where components mount/unmount frequently.
5. Avoid document.write: Many third-party scripts use document.write, but this can break reactive apps by overwriting content. Dynamic script creation (like we did here) is the safer alternative.

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