时间戳

首页 > 解决方案 > 仅在类中而不在函数中导入组件

reactjs - 仅在类中而不在函数中导入组件

问题描述

我有点困惑为什么我们需要在 react 创建类时导入组件？为什么我们不能像在函数组件中那样简单地导入反应？

标签： reactjs

解决方案

函数式组件只是一个普通的 JavaScript 函数，它接受 props 作为参数并返回一个 React 元素。一个类组件需要你从 React 扩展。组件并创建一个返回 React 元素的渲染函数。

要获取有关功能组件与基于类的组件的详细信息，您可以阅读本文

React 之所以流行，是因为它的可重用 Web 组件的概念

在创建功能组件时，我们正在编写一个函数，返回我们希望该组件表示的 JSX。然后在ReactDOM.render()我们有一个功能组件的实例，将它包装在 JSX 标签中，这是一个自闭合组件

函数返回我们想要在页面上表示的 ui，但是函数组件无法完成我们需要执行的所有操作，例如。状态和生命周期方法

函数式组件也称为无状态组件，因为我们不能像生命周期方法那样用它来做所有复杂的事情

基于类的组件

类的语法与 ES6 相同

对于基于类的组件，我们使用 Javascript 中的原型系统及其设置原型React.Component，这为我们提供了一堆好东西React.Component

应用程序.js

import React, {Component} from "react"

class App extends Component {
    constructor(){
    super()
    this.state={
    name:"Bhavya",
    age: 20
    }
    }
    render(){
    return(
    <div>
    <h1>{this.state.name}</h1>
    <h3>{this.state.age} years old</h3>
    </div>
    )
    }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App"

class Main extends React.Component {
  render() {
    return (
      <h1>Hello world!</h1>
    );
  }
}

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

上面的代码App.js也可以这样写：

应用程序.js

import React  from "react"                  ----> Take note of these two lines

class App extends React.Component {
    constructor(){
    super()
    this.state={
    name:"Bhavya",
    age: 20
    }
    }
    render(){
    return(
    <div>
    <h1>{this.state.name}</h1>
    <h3>{this.state.age} years old</h3>
    </div>
    )
    }
}

export default App;

在上面的例子中，App 类扩展了组件，所以 React 认为这个类是一个组件，并且它渲染（返回）一个 React 元素。所以一个 React 类组件是一个 ES6 类，一旦它“扩展”React，它将是一个组件组件 见这个

要了解有关何时使用基于功能或类的组件的更多信息，请参阅此SO ans

React 是 react 包的默认导出，而 Component 是该包中的命名导出。看到这个

要知道你为什么import React在功能组件中参考这个博客

推荐阅读