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

定义组件有两个要求：

1. 组件名称必须以大写字母开头
2. 组件的返回值只能有一个根元素

函数组件

1. 函数组件接收一个单一的 props 对象并返回了一个React元素

2. 函数每次调用都会产生新的临时变量，没有state。

   import React, { PureComponent } from 'react'

   // 函数组件
   function HelloHooks() {
     // 就算函数重新执行, 又会重新赋值, 无意义
     let message = "Hello Hooks"

     return(
       <div>
         <h2>{message}</h2>
       </div>
     )
   }

   export class App extends PureComponent {
     render() {
       return (
         <div>
           <HellWorld/>
           <HelloHooks/>
         </div>
       )
     }
   }

   export default App
    

类组件

   1.类组件可以定义自己的state，用来保存组件自己内部的状态;

   2.类组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑;

import React, { PureComponent } from 'react'

// 类组件
class HellWorld extends PureComponent {
  constructor() {
    super()

    // 类组件可以在state中保存自己的状态
    this.state = {
      message: "Hello World"
    }
  }

  render() {
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
      </div>
    )
  }
}

export class App extends PureComponent {
  render() {
    return (
      <div>
        <HellWorld/>
      </div>
    )
  }
}

export default App

关于组件

1.无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。
2.所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
3.React是单项数据流，父组件改变了属性，那么子组件视图会更新。
4.属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
5.组件的属性和状态改变都会更新视图。
 

区别

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

区别	函数组件	类组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有