1、element v.s. component
元素（element） vs 组件（component）。和 Vue 一样，在 React 的开发中也是强调组件化的，但是 React 中的组件和 Vue 中的组件还是略有不同的。在 Vue 中，一个构造选项（el，data，methods...）就可以表示为一个组件，而对 React 来说，能够返回一个 React 元素的 函数 就叫组件。在开发的过程中更推荐使用函数组件，代码较简洁！
const div = React.createElement('div',...); //这是一个React元素（d小写） const Div = () => React.createElement('div'...); //这是一个React组件（D大写），它是一个能返回元素的函数
在 React 中有两种组件，一种是 函数组件，一种是 类组件。其中类组件的声明过程会比较繁琐一些，需要使用 class、extends 关键字，来继承 React.Component{}，其内部还会有 constructor()、render() 函数，constructor() 函数用来声明一些变量初始状态，render() 函数会返回该类的实例要创建的元素。
//一、函数组件 function Welcome(props){ //当然，你可以使用 ()=>{} 的形式 return <h1>Hello, {props.name}</h1>; //这里的 h1 最终会被 babel-loader 渲染成 React.createElement() } <Welcome name="erha"/> //具体使用 //二、类组件 class Welcome extends React.Component{ //class、extends关键字 render(){ //render 函数 return <h1>Hello, {this.props.name}</h1> //这里的 h1 最终会被 babel-loader 渲染成 React.createElement() } //注意：类组件获取属性的方式要 this. } <Welcome name="erha"/> //具体使用
如果你希望类组件是单文件组件，你可以在一个 .js 文件中通过 import 导入 React ，然后声明 class 组件，再 export default Welcome 的形式导出出去。这样就可以在其余组件对改 Welcome 组件进行导入并使用。
2、React.createElement 的逻辑
在 React 中，千万不要把写在 js 文件中的标签立即为 html 标签，它们其实是一些 React 元素，最终会被 babel-loader 转义成 React.createElement() 代码的。比如：<div/> 会被翻译为 React.createElement（'div'）、<Welcome/> 会被翻译为React.createElement（Welcome），此处的 Welcome 是一个函数组件。感兴趣的话可自行试验：babel online
React.createElement() 函数会根据传入的参数类型（重载），创建对应的虚拟 DOM 元素。如果给 React.createElement() 传入一个字符串 'div'，则会创建一个 div 元素。如果传入一个函数（函数组件），则会调用该函数，获取其返回值。如果传入一个类（类组件），则在类前面加个 new（这会导致执行 constructor），获取一个组件对象，然后调用对象的 render() 方法，获取其返回值。
3、类组件及函数组件的具体使用
在了解了类组件、函数组件及 React.createElement() 后，我们来实现一个小的应用实践一下：
import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App() {/*函数组件*/ class Son extends React.Component {//类组件 return ( constructor() { //内声明变量 <div className="App"> super(); 爸爸 this.state = { n : 0 }; <Son /> } </div> add(){//this.state.n += 1 不行，React的内部数据没有被监听 ); this.setState({ n: this.state.n + 1 }); } } //推荐这种：this. setState((state)=>({x: state.x+1})) render(){ const Grandson = () => {/*函数组件*/ return ( const [n, setN] = React.useState(0); <div className="Son"> return ( 儿子 n: {this.state.n} <div className="Grandson"> <button onClick={() => this.add()}>+1</button> 孙子 n:{n} <Grandson /> <button onClick={()=>setN(n + 1)}>+1</button> </div> </div> ); ); } }; } //孙子组件中的const [n, setN] = React.useState(0); //const array = React.useState(0); const rootElement = document.getElementById("root"); //const n = array[0]; ReactDOM.render(<App />, rootElement); //const setN = array[1];
上述代码都是在 index.js 文件中的，Son 组件是一个类组件，Grandson 组件是一个函数组件。
类组件 中的 变量 需要通过 this.state = { } 声明在 constructor() 构造器中，如果需要对变量进行改变，需要通过 this.setState({ n：变量+1 }) 的形式操作。this.setState(newState，fun) 方法接收的第二个参数是成功后的回调。
函数组件 中的 变量 需要通过 useState(初始值) 的形式进行声明，每个变量都有一个 读和写 的属性（n 和 setN ），如果需要对属性进行改变，则需要通过 ()=>{ setN(n+1) } 的形式对其进行改变。
4、类组件及函数组件的优缺点
函数组件的消耗小，性能佳：
类组件的性能消耗比较大，因为类组件需要创建类组件的实例，而且不能销毁。
函数式组件性能消耗小，因为函数式组件不需要创建实例，渲染的时候就执行一下，得到返回的 react 元素后就直接把中间量全部都销毁。
函数式组件是不能有状态的：
但是现在有了react hooks，也可能有状态了。
