React课程学习系列笔记：02-04 React组件

React是用来做组件化开发的，以功能为导向；

组件化拆分：

        右图每一个虚线所圈起来的部分，都可以视为一个组件；

组件化拆分

 

如下代码中，App就是一个组件：

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

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

如何定义一个组件？

1.当一个类继承了 React.Component 这个类，就是一个 React 组件了

import React from 'react';

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

export default App;

2.也可以用方法定义一个组件

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

解析代码：

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 节点上；

 

注：解构赋值--ES6

import { Component } from 'react';
//等价于
import React from 'react'
const Component = React.Component

关于ES6语法知识，可以在微信小程序中搜索：ES6手册

选择阮一峰版