深入理解react组件类型及使用场景-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

深入理解react组件类型及使用场景

函数组件 vs 类组件

十多年的华蓥网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整华蓥建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“华蓥网站设计”,“华蓥网站推广”以来,每个客户项目都认真落实执行。

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

// 函数组件
function Welcome(props) {
 return 

Hello, {props.name}

; } // 类组件 class Welcome extends React.Component { render() { return

Hello, {this.props.name}

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

无状态组件 vs 有状态组件

函数组件一定属于无状态组件 (划分依据是根据组件内部是否维护state)

// 无状态组件
class Welcome extends React.Component {
 render() {
  return 

Hello, {this.props.name}

; } } // 有状态类组件 class Welcome extends React.Component { constructor(props) { super(props); this.state = { show: true } } render() { const { show } = this.state; return ( <> { show &&

Hello, {this.props.name}

} ) } }

展示型组件 vs 容器型组件

展示型组件(Presentational Component)和容器型组件(Container Component),划分依据是根据组件的职责。 (展示型组件一般是无状态组件,不需要state)

class UserListContainer extends React.Component{
 constructor(props){
  super(props);
  this.state = {
   users: []
  }
 }

 componentDidMount() {
  var that = this;
  fetch('/path/to/user-api').then(function(response) {
   response.json().then(function(data) {
    that.setState({users: data})
   });
  });
 }

 render() {
  return (
   
  )
 }
}

function UserList(props) {
 return (
  
    {props.users.map(function(user) { return (
  • {user.name}
  • ); })}
) }

展示型组件和容器型组件是可以互相嵌套的,展示型组件的子组件既可以包含展示型组件,也可以包含容器型组件,容器型组件也是如此。例如,当一个容器型组件承担的数据管理工作过于复杂时,可以在它的子组件中定义新的容器型组件,由新组件分担数据的管理。展示型组件和容器型组件的划分完全取决于组件所做的事情。

总结

通过上面的介绍,可以发现这三组概念有很多重叠部分。这三组概念都体现了关注点分离的思想:UI展现和数据逻辑的分离。函数组件、无状态组件和展示型组件主要关注UI展现,类组件、有状态组件和容器型组件主要关注数据逻辑。但由于它们的划分依据不同,它们并非完全等价的概念。它们之间的关联关系可以归纳为:函数组件一定是无状态组件,展示型组件一般是无状态组件;类组件既可以是有状态组件,又可以是无状态组件,容器型组件一般是有状态组件。

举个🌰

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { Switch } from 'antd'

@observer
class BaseInfoView extends Component {
 constructor(props) {
  super(props)
 }

 render() {
  const {
   ideaName,
   resourceLocationDto,
   switchState,
   slotId
  } = this.props.model

  return (
   
基本信息
{ ideaName }
{ resourceLocationDto && resourceLocationDto.resourceName }
{ slotId }
) } } export default BaseInfoView

完全可以写成函数组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网页题目:深入理解react组件类型及使用场景
当前地址:http://kswsj.cn/article/igciej.html

其他资讯