如何全面掌握React组件类型及其应用场合？

本文共计1352个文字，预计阅读时间需要6分钟。

函数组件与类组件（Functional Component vs Class Component），依赖是根数据组件的定义方式。

函数组件使用函数定义组件，类组件使用ES6 class定义组件。函数组件通过函数We直接输出。

函数组件 vs 类组件

函数组件(Functional Component )和类组件(Class Component)，划分依据是根据组件的定义方式。函数组件使用函数定义组件，类组件使用ES6 class定义组件

// 函数组件 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } // 类组件 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

1. 函数组件的写法要比类组件简洁，不过类组件比函数组件功能更加强大。函数组件更加专注和单一，承担的职责也更加清晰，它只是一个返回React 元素的函数，只关注对应UI的展现。函数组件接收外部传入的props，返回对应UI的DOM描述，
2. 类组件可以维护自身的状态变量，即组件的state，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。