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 之前調用。