React——组件化

组件化（简单工厂模式，面向对象编程思想）

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

React中创建组件有两种方式

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

函数创建组件

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

规则：

• 函数名称必须以大写字母开头，React 据此区分组件和普通的 HTML
• 使用组件时，直接用方法名当作标签
• 函数组件必须有返回值return，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

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)

// 双标签 渲染组件：
<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 方法必须有返回值

// 导入 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文件当中，这个依据个人习惯、业务性质进行堆放。

// 封装在 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者结合使用