React 基础巩固(十七)——组件化开发（一）
组件化开发
- 什么是组件化开发？
- 分而治之的思想
- 将一个页面拆分成一个个小的功能块
- 将应用抽象成一颗组件树
- React的组件相对于Vue更加的灵活和多样
- 按照不同的方式可以分为很多类组件
- 根据
组件的定义方式，分为：函数组件、类组件 - 根据
组件内部是否有状态需要维护，分为：无状态组件、有状态组件 - 根据
组件的不同职责，分为：展示型组件、容器型组件
- 根据
- 函数组件、无状态组件、展示组件主要关注UI的展示
- 类组件、有状态组件、容器组件主要关注数据逻辑
- 按照不同的方式可以分为很多类组件
类组件
- 定义
- 组件名称是大写字符开头
- 类组件需继承自 React.Component
- 类组件必须实现render函数
- 使用class定义一个组件
- constructor是可选的，通常在constructor中初始化一些数据
- this.state中维护的就是我们组件内部的数据
- render()方法是class组件中唯一必须实现的方法
import React from "react";
// 1.类组件
class App extends React.Component {
constructor() {
super()
this.state = {
message: 'hello react'
}
}
render() {
const { message } = this.state
return <div>{ message }</div>;
}
}
export default App;
- render函数的返回值
- 当render被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
- React元素（通常通过JSX创建，例如
<div/>会被React渲染为DOM节点，<MyComponent/>会被React渲染为自定义组件） - 数组或fragments（使得render方法可以返回多个元素）
- Portals（可以渲染子节点到不同的DOM子树中）
- 字符串或数字类型（在DOM中被渲染为文本节点）
- 布尔类型或null（什么都不渲染）
- React元素（通常通过JSX创建，例如
- 当render被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
函数组件
- 定义：函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容
- 特点：
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数
- this关键字不能指向组件实例（因为没有组件实例）
- 没有内部状态（state）
// 函数式组件
function App() {
// 返回值：和类组件中render函数返回的一致
return <div>hello react</div>;
}
export default App
文章来源地址https://www.toymoban.com/news/detail-521884.html
文章来源：https://www.toymoban.com/news/detail-521884.html
到了这里，关于【前端知识】React 基础巩固(十七)——组件化开发（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
