react中的组件constructor（props）的意义和作用

今天写组件的时候突然发现了以下这两种情况都可以创建组件：

// 第一种写法，继承Component的组件来创建组件
class TodoItem extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default TodoItem;

// 第二种写法，直接写函数return组件

export default function TodoItem() {
    return (
        <div>
            TodoItem
        </div>
    )
}

一直在想这两个都可以创建组件，那他俩有什么区别呢？

functions创建的组件没有生命周期，继承class的组件有react的生命周期，可以使用生命周期里面的方法。仅仅是创建组件，本质上没什么区别。但是如果组件要接受父组件传过来的参数写法略有不同。

函数式组件里面没有 this，也没有 state，函数式组件本身是没有状态的。

// 第一种写法，继承Component的组件来创建组件
class TodoItem extends Component {
    constructor() {
        super(props);    
    }
  render() {
    return (
      <div>
        {this.props.title} // 这里接受传过来的值
      </div>
    );
  }
}

export default TodoItem;

// 第二种写法，直接写函数return组件

export default function TodoItem(props) {
     console.log(props) // 接受参数
    return (
        <div>
            TodoItem
        </div>
    )
}

至于生命周期，其他的用法，我研究透了再更新一下这个博文。未完待续。。。。