ReactNote-函数组件和类组件

组件：
可以编写react元素

虚拟DOM：
react元素

真实的DOM:
可以展示

React里很重要的：
组件

组件目的：
复用

组件作用：
代码分隔

组件在React里有两种定义的方式：

第一种：
定义组件：
函数（JS函数）

函数组件：（不负责状态，只负责渲染）
功能组件
无状态组件

函数组件：
只负责渲染

//函数组件：
function Hello(){
   return <h1>hello itlove</h1>
};
const domContainer = document.querySelector('#example');
ReactDOM.createRoot(domContainer).render(<Hello />);

第二种：

定义组件：
ES6 Class

类组件：（负责状态（状态：定义一些数据...）也负责渲染）
容器组件
状态组件

//类组件：
class Hello extends React.Component(
    render(){
        return <h1>hello itlove</h1>
    }
);

const domContainer = document.querySelector('#example');
ReactDOM.createRoot(domContainer).render(<Hello/>);

推荐使用：函数组件(无状态组件，功能组件）why? 因为hooks的出现

hooks:
让函数组件拥有状态

export 'default':
组件没有被导出

组件需要：
被导出

最基本的函数组件写法：（组件需要被导出）
写法1：
export default function App(){
   return <h1>JXS写法</h1>
}
函数组件特点：
没有生命周期
没有this
没有状态

函数组件主要目的：
为了渲染


此时：‘JXS写法’由真实DOM渲染至页面

写法2：
export default function App(){
   return （<h1>JXS写法</h1>）
}

类：
为了实现相关继承

原型链：
为了实现继承

类组件继承：
必须要继承React里的组件（Reactive.Component）

函数组件：
不需要导入

类组件：
需要导入（import React from 'react'）


Reactive.Component组件：
Reactive.Component{}

每一个类组件里：
都有一个构造器

构造器：
constructor(){}

类组件：
拥有状态

状态初始化进行：
构造器里进行

状态初始化：
this.state={}

添加值：
状态初始化 this.state={ id:'1',title:'标题' }

super:
关键字
父类的构造函数

super():
父类的构造函数的调用


在子类构造器里进行父类的构造函数的调用:
constructor(){
  super()//没有super，子类就拿不到this对象
}

构造器里编写状态:
constructor(){
   this.state={}
}

完整写法：
export default class App extends React.Component{
    //写状态：(构造器里面写）
    constructor(){
      super()//父类构造函数调用，才能让子类拿到this对象
      this.state={
           //写：key:value
             id:'1',
             title:"类组件"
            }
    };
    // 渲染：
    render(){
       return <h1>hello {this.state.title}</h1>
    }
}


React里可以把组件解构：
import React,{Component} from 'react'
//修改写法：
export default class App extends Component{
    //写状态：(构造器里面写）
    constructor(){
      super()//父类构造函数调用，才能让子类拿到this对象
      this.state={
           //写：key:value
             id:'1',
             title:"类组件"
            }
    };
    // 渲染：
    render(){
       return <h1>hello {this.state.title}</h1>
    }
}

原文地址：http://www.cnblogs.com/strundent/p/16899502.html