什么是React组件（React组件基础知识）

在这一部分中，我们将了解React组件的基础知识。在过去，开发人员只在一个文件中编写数千行代码，这意味着所有代码都将包含在同一个文件中，因此，如果任何逻辑或代码行导致错误，那么开发人员必须找出是什么简单地意味着花费了太多时间采取只解决一个问题。为了解决这个问题，我们引入了react 组件。

React Components什么都不是，但它们只是为减少主文件中混乱和加权代码而创建的文件，React Components是我们可以在其中为单个逻辑编写代码的文件，因此如果任何逻辑或代码有错误，我们可以轻松地相应地调试和更正它。

React 组件主要有两类：

(1) 功能组件

(2) 类组件

函数组件

标题.js

import React from 'react';function Heading(){   return(      <h1> ReactJS GURU</h1>   );}export default Heading;

细节.js

import React from 'react';function Details(){   return(      <p> Best and Easy Learn On ReactJS GURU</p>   );}export default Details;

应用程序.js

import React from 'react';import Heading from './Heading';import Details from './Details';function App(){   return(      <>         <Heading/>         <Details/>      </>   );}export default App;

索引.js

import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(    <App />  );

好的，正如您所看到的，我们在这里有Heading.js、Details.js，这些文件是我们的组件，我们在其中采用一个标题，在另一个中我们有一个段落。还要记住组件文件的名称以大写字母开头。

我们在这里将这些文件导入到我们的App.js 文件中，如果你想在你的文件中使用组件，那么你必须使用import <any name> from ‘component file path’ 导入它。这里你可以给任何你想要的名字，但建议给一个合适的名字，这样你就可以识别文件。

之后，我们使用带有<componentname/>这个标签的组件，看起来像一个自定义的HTML标签吧？此外，我们在这里使用了片段，因为我们需要显示两个不同的标签。fragment 的语法糖形式是 <>…code…</>。现在你可以看到我们有几行index.js看起来很酷。

类组件

功能组件比类组件更简单。你需要扩展 react.component。创建一个组件和一个返回 React 元素的渲染函数。数据可以从一个类传递到另一个类组件。可以通过创建扩展组件的类来创建类。它还具有渲染功能。下面的示例显示了一个有效的类组件。

例子：

标题.js

import React from 'react';class Heading extends React.Component{  render(){    return(      <h1> ReactJS GURU</h1>     );  }}export default Heading;

细节.js

import React from 'react';class Details extends React.Component{    render(){        return(            <p> Best and Easy Learn On ReactJS GURU</p>        );    }}export default Details;

应用程序.js

import React from 'react';import Heading from './Heading';import Details from './Details';function App(){   return(      <>         <Heading/>         <Details/>      </>   );}export default App;

索引.js

import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(    <App />  );

Heading和Details 组件中，我们需要使用类组件，因为我们扩展了React.component包，并且如果你编写更多组件，我们还需要一次又一次地渲染，因此使用函数式组件将是明智的选择. 此外，App.js和index.js将保持与功能组件相同。