React中函数组件和类组件的区别

定义组件的基本规范：

1. 组件名称首字母大写；

2. 组件的返回值只能有一个根元素；

目录

1. 函数组件（无状态组件）：

2. 类组件（有状态组件）：

3. 函数组件和类组件的区别

---

1. 函数组件（无状态组件）：

function Welcome(props){
   return <p>{props.name}</p>;
}


// React内
const result = Welcome(props); // <p>{props.name}</p>

2. 类组件（有状态组件）：

class Welcome extends React.Component{
   constructor(props){
      super(props);  //用来初始化this的，可以绑定事件到this上
      this.state={}
   }
   
   render(){
      return <p>{this.props.name}</p>;
   }
}

// React内
const instance = new Welcome(props); // Welcome {}
const result = instance.render(); // <p>{this.props.name}</p>

调用super后，才能使用this:  根本原因是constructor会覆盖父类的constructor，导致父类构造函数没执行，所以手动执行super继承;

3. 函数组件和类组件的区别

（1）生命周期：函数组件不存在生命周期；类组件的生命周期钩子函数继承自React.Component;

（2）状态管理：在React Hook出现之前，函数组件无状态；类组件有状态state；

（3）React调用方式：函数组件直接调用； 类组件需要实例化，调用实例的render()方法；

（4）获取渲染的数据：类组件的this指向会变化；函数组件没有this；

React中props是不可变的，但this指向是可变的；

React注意事项：

1. 不要在jsx语法中使用 if - else,可以使用三目运算、或运算、与运算;
2. 不要在jsx语法中使用 for 循环, 使用 map 循环;
3. 添加状态必须在构造方法，添加构造方法必须执行super();
4. 组件必须导入React;   

   import React, { Component } from 'react';