组件化概念

组件化是一种分而治之的思想

如果将页面中所有的处理逻辑全放一起，维护起来就会变得复杂，而且不利于后续的管理以及扩展
如果将一个页面拆分成一个个小功能块，每个功能块完成独立的功能，那么页面管理和维护就变得容易了

组件化是React 的核心思想

组件化提供了一种抽象，可以开发出一个个独立可复用的小组件来构造应用
任何应用都会被抽象成一棵组件树

组件化的优势

代码更方便组织和管理，并且扩展性也更强

React 组件更加灵活多样，按照不同方式可分成很多类别组件

根据组件的定义方式： 函数组件和类组件
根据组件内部的状态是否需要维护： 无状态组件和有状态组件
根据组件的不同职责： 展示型组件和容器型组件

React 组件主要关注数据逻辑和 UI 展示的分离

函数组件、无状态组件、展示型组件主要关注 UI 展示
类组件、有状态组件、容器型组件主要关注数据逻辑

类组件

类组件的定义要求：

组件的名称必须是大写字符开头(无论类组件还是函数组件)
需要继承自 React.Component
必须实现 render 函数
constructor 是可选的，通常在 constructor 中初始化一些数据
this.state 中维护组件内部的数据

 // 最基本的类组件
 import { Component } from 'react'
 class App extends Component{
   render(){
     return (
       <div>
         <h2>Hello,React</h2>
       </div>
     )
   }
 }

类组件

类组件的定义要求：

组件的名称必须是大写字符开头(无论类组件还是函数组件)
需要继承自 React.Component
必须实现 render 函数
constructor 是可选的，通常在 constructor 中初始化一些数据
this.state 中维护组件内部的数据

 // 最基本的类组件
 import { Component } from 'react'
 class App extends Component{
   render(){
     return (
       <div>
         <h2>Hello,React</h2>
       </div>
     )
   }
 }

当 render 被调用时，根据 props 和 state 的变化，可能返回以下类型之一

React 元素： 通过 JSX 创建，如 <div></div> 会被渲染为 DOM 节点，<MyComponent/> 会被渲染为自定义组件，两者均为 React 元素

 render(){
   return (
     <div>Hello,React</div>
   )
 }

数组或 fragments： 使得 render 方法可以返回多个元素

 // 存放普通元素的数组
 render(){
   return ['abc','cba']
 }
 
 // 存放dom元素的数组
 render(){
   return [<h1>哈哈哈</h1>,<h2>呵呵呵</h2>]
 }

Portals： 可以渲染子节点到不同的 DOM 子树中
字符串或数值类型： 最终在 DOM 中会被渲染为文本节点

 render(){
   return 'abc'
 }

布尔类型、null、undefined： 什么都不渲染

 // null
 render(){
   return null
 }

函数组件

函数组件是使用 function 进行定义的函数，该函数需返回和类组件的 render 函数返回一样的内容

函数组件特点(假设没有 React Hooks)

没有生命周期钩子，但也会被更新并挂载
this 关键字不能指向组件实例
没有内部状态(state)

 function App(){
   return <h1>Hello,React</h1>
 }

React--组件化开发

组件化概念

类组件

类组件

函数组件