32.无状态组件 vs 普通组件 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

1.普通组件

import React, {Component} from 'react'

class TodolistUI extends Component {
   render() {
       return (
        // ...
       )
   }
}

export default TodolistUI

当组件只有render函数时，则称之为无状态组件。无状态组件就是一个函数。例如，上面的 TodolistUI组件是一个UI组件，在这个组件中，只有一个render函数。则可以使用另一种写法。把TodolistUI写成一个函数。

2.无状态组件

const TodolistUI = (props) => {
  return (
     // ...
  )
}

这样就构建出了一个无状态组件。当一个普通的组件只有一个render函数时，我们完全可以通过一个无状态组件来替换掉这个普通的组件。

3.无状态组件 vs 普通组件 的优势：

• 无状态组件的性能比较高。

• 因为普通组件中 TodolistUI 是一个类，这个类中含有一些生命周期函数。所以它执行的时候，既要执行生命周期函数，又要执行render，所以它执行的东西要远比一个函数执行的东西多的多。

• 所以建议大家，如果一个普通组件中只有一个render函数，建议用无状态组件来定义它。性能最优。

• 通常我们会在定义UI组件时，使用无状态组件来定义这个UI组件。也不是绝对。