React---day5

news2025/6/5 17:05:20

4、React的组件化

组件的分类：

根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；
根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；
根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；

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

类组件：

import React from "react";
export class App extends React.Component{
    constructor(){
        super();

        this.state =  {
            counter : 0
        }
    }
    render(){
        return (
            <div>
                <h2>当前计数为{this.state.counter}</h2>
            </div>
        )
    }
}

函数组件：

export function Func (){
    return (
        <div>
            <span>
                我是function的组件：App组件
            </span>
        </div>
    )
}

类组件：

组件的名称是大写字符开头（无论类组件还是函数组件）
类组件需要继承自 React.Component
类组件必须实现render函数

函数组件：

没有生命周期，也会被更新并挂载，但是没有生命周期函数；
没有this(组件实例）；
没有内部状态（state）；
我们来定义一个函数组件：

render函数的返回

React 元素：

通常通过 JSX 创建。例如，

会被 React 渲染为 DOM 节点，会被 React 渲染为自定义组件；无论是
还是均为 React 元素。
数组或 fragments：使得 render 方法可以返回多个元素。
Portals：可以渲染子节点到不同的 DOM 子树中。
字符串或数值类型：它们在 DOM 中会被渲染为文本节点
布尔类型或 null：什么都不渲染。

5、React的生命周期

什么是生命周期：

比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；
比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；
比如卸载过程（Unmount），组件从DOM树中被移除的过程；

生命周期函数：

比如实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；
比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调；
比如实现componentWillUnmount函数：组件即将被移除时，就会回调；

在这里插入图片描述

详解生命周期函数：

Constructor
如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
constructor中通常只做两件事情：

通过给 this.state 赋值对象来初始化内部的state；
为事件绑定实例（this）；

componentDidMount
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
componentDidMount中通常进行哪里操作呢？

- 依赖于DOM的操作可以在这里进行；
- 在此处发送网络请求就最好的地方；（官方建议）
- 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；

componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作；
如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。

componentWillUnmount

componentWillUnmount() 会在组件卸载及销毁之前直接调用。
在此方法中执行必要的清理操作；例如，清除 timer，取消网络请求或清除，在 componentDidMount() 中创建的订阅等；

、不常用的生命周期函数

getDerivedStateFromProps

getDerivedStateFromProps 是 React 16.3 引入的一个静态生命周期方法，用于在组件接收到新的 props 时同步更新 state。

作用：确保 state 与 props 保持同步，特别是当 state 的值完全依赖于 props 时。
调用时机：在组件初始化、接收到新的 props 或父组件强制更新时被调用。
返回值：返回一个对象，表示需要更新的 state，如果不需要更新则返回 null。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate 是在 React 更新 DOM 之前调用的一次性生命周期函数，用于获取 DOM 更新前的一些信息（如滚动位置）。

作用：在组件更新之前捕获 DOM 的某些状态，以便在更新后使用这些信息。
调用时机：在 render 方法之后、DOM 更新之前调用。
返回值：返回值将作为 componentDidUpdate 的第三个参数传递。

shouldComponentUpdate

shouldComponentUpdate 是一个性能优化的生命周期函数，用于决定组件是否需要重新渲染。

作用：通过返回 true 或 false 控制组件的更新，从而避免不必要的渲染。
调用时机：在组件接收到新的 props 或 state 时，但在 render 之前调用。

6、组件之间进行数据传递

父传子：

父组件：

 <div>
              <ChildCpn name="蒋乙菥" age="18" height="1,88" />
</div>

子组件：

export class ChildCpn extends React.Component{
    render(){
        const {name , age , height} = this.props
       return (
         <div>
            <h2>{"姓名" + name + "," + "年龄" + age + "身高" + height}</h2>
        </div>
       )
    }
    
}

制更新时被调用。