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手册
选择阮一峰版