ReactJS 在注册一个组件在局部和全局的区别

在本文中，我们将讨论在ReactJS中注册一个组件在局部和全局的区别。

这指的是您如何使组件在应用程序中对其他组件可用。这两种方式都允许我们重复使用同一个组件。两者之间的主要区别是组件的作用域和在应用程序中如何使用它。

1. 注册一个组件在局部： 在ReactJS中，局部组件是在同一个文件或组件中定义和使用的组件。局部组件只能在其注册的组件的作用域内访问。这对于创建特定于应用程序的某个部分的可重用UI元素非常有用。

关键点：

组件只能在文件或组件中访问。
组件对文件外的其他组件是不可访问的。
我们不能导出局部组件。
组件是使用 function 或 class 语法创建的。

语法： 使用相应的语法创建组件。

function LocalComponent (props) {
      return (
        ...
      )
}

参数: 它接受以下参数:

props (对于函数式组件): 包含传递给组件的属性的对象。

示例: 这是一个非常简单和通用的本地组件注册示例。我们首先声明或创建组件。由于它只能在同一个文件中使用，而不是在整个应用程序中使用，所以我们在同一个文件中直接使用它。此外，我们还不能导出本地组件。

import React from 'react'
  
function LocalComponent(props) { 
    return ( 
        <div> 
            <h1>Local Component</h1> 
            <p>This is a local component</p> 
        </div> 
    ) 
} 
  
export default function App() { 
    return ( 
        <div> 
            <LocalComponent /> 
        </div> 
    ) 
}

运行应用程序的步骤：

在终端中写入以下代码以运行应用程序：

npm start

输出：

ReactJS 在注册一个组件在局部和全局的区别

解释： 首先，我们声明了一个Local组件。然后我们在另一个名为App的函数中使用它。在这里，可以在App函数中使用，因为app和LocalComponent都在同一个文件中。

2. 全局注册组件： 在ReactJS中，全局组件是在不同文件或组件中定义和使用的组件。全局组件可以从应用程序中的任何组件访问。这对于创建在应用程序的多个部分共享的组件非常有用。全局组件可以在整个应用程序中使用。

关键点：

该组件可以从应用程序的任何组件访问。
该组件也可以被其他文件中的组件访问。
该组件也可以被导出。
该组件使用函数或类语法创建。
该组件使用 React.createElement 方法注册。

语法：

const GlobalComponent = (props) => {
      return (
        ...
      )
}

//component registering 语法
React.createElement(GlobalComponent, {...props})

参数：

ReactComponent： 要全局渲染的组件类（在此处为 GlobalComponent）。
document.getElementById(‘root’)： 要渲染组件的DOM元素。
props： 包含传递给组件的属性的对象。

示例： 声明一个名为”GlobalComponent”的全局组件，在本地使用并全局注册。

import React from 'react'
  
const GlobalComponent = (props) => { 
    return ( 
        <div> 
            <h1>Global Component</h1> 
            <p>This is a global component</p> 
        </div> 
    ) 
} 
  
export default function App() { 
    return ( 
        <div> 
            {React.createElement(GlobalComponent, null)} 
        </div> 
    ) 
}

运行应用程序的步骤：

在终端中输入以下代码以运行应用程序：

npm start

Output: 输出
ReactJS 在注册一个组件在局部和全局的区别

说明： 首先我们声明了一个全局组件。然后我们在名为App的另一个函数中将其在本地使用。 {React.createElement(GlobalComponent, null)} **** –> 这部分代码允许我们在全局注册组件。现在我们可以在应用的任何文件中多次使用GlobalComponent。为了简单起见，我们在同一个文件中使用了它，并在全局注册了它。

要在React中全局注册一个组件，您需要从当前文件中导出它，然后在要使用它的组件中导入它。全局注册组件允许您在应用程序的任何部分使用它。

本地和全局组件注册的区别：

本地组件注册	全局组件注册
只能在定义它的组件内使用	可在整个应用程序中使用
在特定组件内需要时很有用	在多个组件中需要重用组件时很有用
避免命名冲突	如果两个组件具有相同的名称，可能导致命名冲突
提高性能	对于较大的应用程序可能导致性能变慢
更容易维护	如果进行了更改，可能需要在多个地方进行更新
增加模块化和组织性	可能导致代码更紧密耦合
更直观的调试和测试	可能需要在多个地方测试组件