React——组件化

组件化(简单工厂模式,面向对象编程思想)

组件化其实在每个架构当中都存在,通常我们会把独立、可复用、可组合的不错剥离出来,独立开发一个组件。

React中创建组件有两种方式

  1. 函数创建组件,function或者箭头函数
  2. class 创建组件,通过ES6提供的class、extend去创建
函数创建组件

函数组件:使用JS的函数 或者箭头函数创建的组件

规则:

  • 函数名称必须以大写字母开头 ,React 据此区分组件普通的 HTML
  • 使用组件时,直接用方法名当作标签
  • 函数组件必须有返回值return,表示该组件的 UI 结构;如果不需要渲染任何内容,则返回 null
js 复制代码
import React from 'react';
import ReactDOM from 'react-dom';
// 使用普通函数创建组件:
function New() {
  return <div>我是函数组件</div>
}
// 使用箭头函数创建组件:
const New = () => <div>我是函数组件</div>

// 通过调用的方式去使用
const viewRoot = document.getElementById('root')
ReactDOM.render (New(),viewRoot)
js 复制代码
// 双标签 渲染组件:
<New></New>
ReactDOM.render(<New></New>, root)

// 单标签 渲染组件:
<New />
ReactDOM.render(<New />, root)
class类创建组件(ES6)

类(class)组件:使用 ES6 的 class 和extend 继承React的component来创建的组件

  • 类名称也必须以大写字母开头
  • 类组件应该继承 React.Component 父类,从而使用Component 父类中提供的方法或属性 (也可以按需导入,下面例子有)
  • 类组件必须提供 render 方法,render 方法必须有返回值
js 复制代码
// 导入 React
import React from 'react'
import { Component } from 'react'
// class New extends Component {
class New extends React.Component {
  render() {
    return <div>这是class组件</div> 
  }
}
ReactDOM.render(<New />, root)
如何进行组件的封装

依据业务、组件类型分门别类放在JS文件当中,这个依据个人习惯、业务性质进行堆放。

js 复制代码
// 封装在 New.js /New.jsx
import { Component } from 'react'
class New extends Component {
  render() {
    return <div>封装组件</div>
  }
}
// 导出New组件
export default New


// index.js里面如何使用
import New from './New'
// import New from './New.jsx'

// 渲染导入的New组件
ReactDOM.render(<New />, root)
函数组件和类组件的区别
区别 函数组件 类组件
组件状态(hook之前) 无状态组件(静态) 有状态组件(动态,state)
组件状态(hook) 无状态组件(静态)、有状态组件(动态) 有状态组件(动态,state)
性能 更高 较低
数据变化 静态页面 动态页面,state(对象,与render同级)组件内部私有数据,只有组件内部可以使用,通过this.state.xxx获取数据
实际开发 2者结合使用 2者结合使用
相关推荐
qq_456001655 分钟前
在Vue3中,如何在父组件中使用v-model与子组件进行双向绑定?
前端·javascript·vue.js
sunbyte3 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊4 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林4 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君6 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库6 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端6 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪7 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程7 小时前
如何测试短信接口
java·服务器·前端