react组件是什么?

react组件是什么?

所谓组件,即封装起来的具有独立功能的UI部件。

组件就是页面上的一部分,大大小小的各种组件拼在一起就变成了一个完整的页面,就像我们玩的拼图,需要一块一块的拼接在一起才能变成一副完整的拼图。

1.png

以上图为例,每个框框就可以当做一个组件,组件的拆分可以根据自己开发的页面决定。一个完整的页面非常复杂,很难编写。但是,当我把页面分成一个个小组件进行开发之后,再进行开发和维护这些组件就会比较简单了。

这就是我们前端通常说的前端组件化的概念。有了组件化这么一个概念之后,打开我们之前创建好的项目代码。

项目目录,我展开了开发当中最主要的两个文件夹,在 src 文件夹下现在又一个 App.js 的文件和一个 index.js 文件、在 public 文件夹下有一个图标文件 favicon.ico 和一个 index.html 文件。

2.png

打开 index.js 文件,它是整个程序的运行入口。

./src/index.js

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

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

上面的第三行代码通过 import 导入 App 文件,这个 App 其实就是一个组件。

接下来看一下,该如何定义一个组件。import App from './App'; 中的 App 来自于 ./src/App.js 这个文件。下面就是一个最基础的 React 组件。

./src/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>Hello React</h1>
    );
  }
}

export default App;

看一下上面的代码是如何定义一个组件的。

第一行有一个 { Component } ,这是一个 ES6 的语法。上面的所有代码可以改写成下面这样,你们应该就理解 { Component } 这个语法是表达什么的了。

import React from 'react';

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

export default App;

忽略空行,第二行代码,通过 ES6 中的 class 语法定义了一个叫做 App 的类,并继承了 React.Component 的方法。这样就相当于定义了一个 React 的组件了。

接着往下看,这个 App 组件里有一个 rander() 方法。这个方法返回了一些 html 标签。

这些返回的内容是挂载到 indesx.html 页面上的内容。

最后通过 import React from 'react'; 导出这个 App 组件。

在 ./src/index.js 文件中使用 import App from './App'; 引入了 ./src/App.js 这个组件。这样就可以通过 index.js 这个入口文件把组件显示在页面上。

npm start 启动项目,再次看一下组件显示的内容。还是跟上次一样,显示出了 Hello React 。

3.png

重新去我们的 ./src/App.js 文件下修改一下里面的代码。把第六行的 <h1>Hello React</h1> 修改成 <h1>Hello World</h1>。保存,回到浏览器,刷新。

4.png

页面内容就变成了 Hello World 。为什么会这样呢?原因就在于,在 ./src/index.js 中引入了 App 组件,而这个组件渲染的内容就是 Hello World ,这样你的页面就会跟着变了。

到现在,你们应该对组件有了细微的了解。

一开始 ./src/App.js 文件的代码是这样的。

import React, { Component } from 'react';

// import { Component } from 'react';   这个 { Component } 可以单独取出来
// 上面那行就等价于
// import React from 'react'
// const Component = React.Component

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

了解一下是这样写的就好。

再看一下 ./src/index.js ,我们在这个文件中引入了 App.js 这个组件。看一下最后一行 ReactDOM.render() 做了些什么工作。

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

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

ReactDOM 是一个第三方的模块,它有一个方法叫做 render() ,这个方法可以帮我们把一个组件挂载到我们的一个 DOM 节点上。

最后一句我们把 App 这个组件挂载到 id 等于 root 这样的一个 DOM 节点上。

切换到浏览器上,打开控制台看一下。

5.png

很明显的看到,Hello World 这个内容的标签就挂载到了 <div id="root"></div> 标签上。

为什么要把 App 这个组件挂载到 id 为 root 这个节点上呢?在 ./public 这个目录中有一个 index.html 的文件。这是我们工程文件的 html 模板。在这个模板里有一个 <div id="root"></div> 的标签,它就是我们整个网页的内容部分。把所有的内容都放到了那个节点上。

./public/index.html

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body></html>

里面的内容是由谁生成的呢?很明显是我们使用的 React 生成的。生成的内容就是 App 组件里的内容。

在 ./src/App.js 文件和 ./src/index.js 文件中都引入了 React 模块,但是并没有发现在哪里使用到了这个模块。

我们试着把 ./src/index.js 中的导入 React 模块的那句注释掉。

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

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

保存一下,到网页上刷新页面。

6.png

会提示 Failed to compile ,编译失败。

当我们用 ReactDOM.render() 的时候,里面有 <App /> 这样的一个自定义标签参数。其实,这是 React 的一种语法。叫做 JSX 语法,过阵子会给大家详细的讲解。只要你使用了这种语法,就要引用 React 模块。不引用 React 就没办法编译这种 JSX 语法的。这样 ./src/index.js 里面的四行代码大概知道了是用来干嘛的了。

再打开 ./src/App.js,里面的引用的 React 也是为了编译这种语法。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

在 render() 方法中,return 的内容就包含了 JSX 语法。

更多前端开发知识,请查阅 HTML中文网 !!

以上就是react组件是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏