React笔记02——React中的组件

一个网页可以被拆分成若干小部分，每个部分都可以称为组件，即组件是网页中的一部分。组件中还可以有多个组件。

上一节中的App.js就是一个组件（继承了React.Component类的类）。

一个组件的构成：

import React from 'react';
class App extends React.Component {
        render (){
           return (
              <div>Hello world</div>
            );
        }        
}
export default App;
//======================================
//实际项目中用下方这种简化写法
import React,{ Component } from 'react';
class App extends Component {
　　　　　　render (){
           return (
              <div>Hello world</div>//这里直接使用标签也是JSX语法，还是需要引入React模块！
            );
        }        
}
export default App;
//语法拆分理解⬇️⬇️⬇️
//import { Component } from 'react';
//import React from 'react';
//const { Component } = React
//const Component = React.Component

需要引入组件的js文件构成：

import React from 'react';//负责解析JSX语法
import ReactDOM from 'react-dom';

import App from '/.App';//引入组件
//JSX语法，需要React模块支持，如果不引入React模块会报错
ReactDOM.render(<App />,document.getElementById('root'));

render()函数

将内容渲染到页面上。

页面渲染的流程：首先有一个index.html文件，文件中引入了入口文件index.js，执行后，引入了App.js组件（组件是通过一个继承于React.Component的类实现的），组件的内容就是render函数中return的内容，有了这个组件后，index.js会通过ReactDOM.render()函数把这个组件挂载到index.html中id为root的div中，页面就成功渲染出来了。

创建多个组件

在src目录下新建自己的组件:组件名.js，仿照App.js来编写。在index.js中通过import引入该组件，通过ReactDOM.render()函数挂载到页面中，其中ReactDOM.render()函数一次只能渲染一个单标签，因此要把多个标签包裹到一个div标签中即可。

React笔记02——React中的组件

猜你喜欢