React Native 中的哑组件

在本文中，我们将学习 React Native 中的 Dumb 组件。哑组件是 React 组件的类别之一，因此在深入了解哑组件细节之前。让我们稍微了解一下组件。组件是 React 的核心构建块之一。组件是一段本质上可重用的代码。 react 或 react-native 中的每个应用程序都是由组件组成的。在组件的帮助下，创建 UI 的任务变得更加容易。我们独立处理每个组件，并将它们全部合并到一个父组件中以创建我们的最终 UI。

为了组织 react-native 应用程序，我们必须将组件拆分为哑组件和智能组件，以便我们更容易处理状态更改和数据流。

现在让我们了解一下 Dumb Component。

哑组件：哑组件是最可重用的组件，它唯一的工作就是向视图渲染某些东西，或者说是 DOM。哑组件主要专注于演示，这就是为什么它也被称为演示组件。演示完成后，组件就完成了。基本上，他们只关心事物的外观。我们可以在一个地方编写一个哑组件，并在应用程序中多次使用它。这样做会节省很多时间。如果我们想改变任何东西，我们只需要在一个地方更新代码，所有使用这个哑组件的屏幕也会得到更新。该组件不包含任何业务逻辑。它只有 render() 方法。哑组件也不知道任何关于状态或任何生命周期钩子的信息。它可以通过 props 接收来自父母的数据和回调。下面是哑组件的语法。

句法：

const Function = (props) => {
 return(
   ...code of creating any element
 )
}

哑组件的特点：

• 专注于 UI ：哑组件主要关注事物的外观。所以几乎所有的 UI 组件，如按钮、输入、模式等都应该被视为哑组件。
• 接受 props：哑组件接受 props 来接收来自父组件的数据和回调函数。这使它们具有动态性和可重用性。
• 很少包含状态：哑组件不包含状态，它包含状态的唯一一次是操作 UI 本身而不是数据。
• 无依赖关系：哑组件不需要对应用程序的其余部分有任何依赖关系。
• 轻松测试：测试哑组件很容易，因为它只需要道具并返回 UI。它没有任何复杂的数据逻辑或状态。

安装：这里我们将使用 Expo CLI 版本，它可以更流畅地运行您的 React Native 应用程序。请按照以下步骤一一设置您的 React 原生环境。

第 1 步：打开终端并运行以下命令。

npm install -g expo-cli

第 2 步：现在 expo-cli 已全局安装，因此您可以通过运行以下命令来创建项目文件夹。

expo init "projectName"

第 3 步：现在进入创建的文件夹并使用以下命令启动服务器。

cd "projectName"
npm start 

示例：在本示例中，我们创建了名为 GFG 的哑组件，并在 APP函数中使用了 3 次。

Javascript

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
  
const GFG=()=>{
return (
  
    
        Geeksforgeeks
    
  
);
}
const styles=StyleSheet.create({
  container:{
    backgroundColor:"green",
alignItems:"center",
  },
  text:{
    fontSize:25,
    backgroundColor:"white",
    margin:10,
     borderRadius:5
  }
});
export default function App() {
  return (
    
          
          
          
    
  );
}

输出：

GFG