React组件化开发

组件化开发思想

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

如果我们将一个页面中所有的处理逻辑全部放在一起    
    
    
，处理起来就会变得非常复杂    


     


     


，而且不利于后续的管理以及扩展    
    
    
。

但如果




 




 




 ，我们讲一个页面拆分成一个个小的功能块   

   

   
，每个功能块完成属于自己这部分独立的功能     

     

     

，那么之后整个页面的管理和维护就变得非常容易了    


     


     


。

我们需要通过组件化的思想来思考整个应用程序：

我们将一个完整的页面分成很多个组件；

每个组件都用于实现页面的一个功能块；

而每一个组件又可以进行细分；

而组件本身又可以在多个地方进行复用；

组件化是React的核心思想




  




  




 ，也是我们后续课程的重点
  


  


  
，前面我们封装的App本身就是一个组件：

组件化提供了一种抽象     
     
     
，让我们可以开发出一个个独立可复用的小组件来构造我们的应用




 




 




 。

任何的应用都会被抽象成一颗组件树   

   

   
。

React的组件化

组件化思想的应用：

有了组件化的思想 




   




   




 ，我们在之后的开发中就要充分的利用它     

     

     

。

尽可能的将页面拆分成一个个小的   
    
    
、可复用的组件




  




  




 。

这样让我们的代码更加方便组织和管理

 



 



 
，并且扩展性也更强
  


  


  
。

React的组件相对于Vue更加的灵活和多样               ，按照不同的方式可以分成很多类组件：

根据组件的定义方式  




    




    




 ，可以分为：函数组件(Functional Component )和类组件(Class Component)；

根据组件内部是否有状态需要维护













，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；

根据组件的不同职责               ，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；

这些概念有很多重叠   



     



     



 ，但是他们最主要是关注数据逻辑和UI展示的分离：

函数组件


     


     


     、无状态组件 




 




 



、展示型组件主要关注UI的展示；

类组件   

   

   

、有状态组件

     

     

    、容器型组件主要关注数据逻辑；

当然还有很多组件的其他概念：比如异步组件
  




  




  


、高阶组件等













，我后续文章会进行讲解     
     
     
。

React中类组件

类组件的定义有如下要求：

组件的名称是大写字符开头（无论类组件还是函数组件）

类组件需要继承自 React.Component

类组件必须实现render函数

在ES6之前    
    
    
，可以通过create-react-class 模块来定义类组件    


     


     


，但是目前官网建议我们使用ES6的class类定义 




   




   




 。

使用class定义一个组件：

constructor是可选的




 




 




 ，我们通常在constructor中初始化一些数据；

this.state中维护的就是我们组件内部的数据；

render() 方法是 class 组件中唯一必须实现的方法；

import React, { Component } from react export class App extends Component { // 在constructor中初始化一些数据 constructor() { super() // this.state中维护的就是我们组件内部的数据 this.state = { message: "Hello World" } } // render函数是唯一必须实现的 render() { const { message } = this.state return ( <div> <h2>{message}</h2> </div> ) } } export default App

当 render 被调用时   

   

   
，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

React 元素：

通常通过 JSX 创建

 



 



 
。 例如     

     

     

，<div/> 会被 React 渲染为 DOM 节点




  




  




 ，<MyComponent/> 会被 React 渲染为自定义组件； 无论是元素标签 <div/> 还是自定义组件 <MyComponent/> 均为 React 元素               。 export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } // render函数是唯一必须实现的 render() { const { message } = this.state // 1.react元素: 通过jsx编写的代码就会被编译成React.createElement, 所以返回的就是一个React元素 return ( <div>{ message }</div> ) } }

数组或 fragments(fragments后续文章讲解)：使得 render 方法可以返回多个元素  




    




    




 。

export class App extends Component { render() { // 2.返回数组 return ["aaa", "bbb", "ccc"] } } export class App extends Component { render() { // 2.返回数组 return [ <h2>我是标题</h2>, <div>我是内容</div>, <i>我是斜体</i> ] } }

Portals：可以渲染子节点到不同的 DOM 子树中(后续文章讲解)













。

字符串或数值类型：它们在 DOM 中会被渲染为文本节点

export class App extends Component { render() { // 3.返回字符串或数值类型 // return "aaa" return 123 } }

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

export class App extends Component { render() { // 4.返回布尔类型 // return true return false } }

React函数组件

函数组件是使用function来进行定义的函数
  


  


  
，只是这个函数会返回和类组件中render函数返回一样的内容               。

函数组件有自己的特点（当然     
     
     
，后面我们会讲hooks 




   




   




 ，就不一样了）：

没有生命周期

 



 



 
，也会被更新并挂载               ，但是没有生命周期函数；

this关键字不能指向组件实例（因为没有组件实例）；

没有内部状态（state）；

我们来定义一个函数组件：

export default function App() { return ( <div> <h2>我是标题</h2> <div>我是内容哈哈哈</div> </div> ) }

在现阶段的学习中  




    




    




 ，我主要讲解类组件













，后面学习Hooks时               ，会针对函数式组件进行更多的学习   



     



     



 。