React Native 智能组件

在本文中，我们将学习 React Native 中的智能组件。智能组件是 React 组件的类别之一，因此在深入了解智能组件细节之前。组件是 React 和 React-Native 的核心构建块之一。组件是一块可以再次重用的代码块，让开发者更容易创建 UI。因为有了组件，代码更容易理解。为了组织 react-native 应用程序，我们必须将组件拆分为哑组件和智能组件，以便我们更容易处理状态更改和数据流。

智能组件：它是基于类的组件，负责处理和管理应用程序的状态。它们有constructor() 函数，它们在其中定义自己的状态。它们也称为容器组件。

语法：以下是智能组件的语法

class App extends Component {
    constructor(props){
        // Code
    }
}

智能组件的特点：

• 它们用于将应用程序数据传递给子组件
• 他们知道关于生命周期方法、调用 API 或库的一切。
• 它们不包括样式。
• 它们是有状态的。它管理应用程序的状态。
• 他们知道何时渲染和重新渲染组件。

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

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

npm install -g expo-cli

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

expo init "projectName"

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

cd "projectName"
npm start 

项目结构：它看起来像这样。

示例：在此示例中，我们将数据从智能组件传递到子组件。

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
  
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'Welcome To GFG',
    };
  }
  
  render() {
    const { data } = this.state;
    return (
      
        
      
    );
  }
}
class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.dataFromParent,
    };
  }
  
  render() {
    const { data } = this.state;
    return {data};
  }
}
  
const styles = StyleSheet.create({
  text: {
    color: 'green',
    fontSize: 25,
  },
});

使用以下命令启动服务器。

npm run android

输出：