React---day5

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.propsreturn (<div><h2>{"姓名" + name + "," + "年龄" + age + "身高" + height}</h2></div>)}}

制更新时被调用。

• 返回值：返回一个对象，表示需要更新的 state，如果不需要更新则返回 null。

getSnapshotBeforeUpdate

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

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

shouldComponentUpdate

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

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