JS開(kāi)發(fā)手機(jī)APP

2022-06-02

JS開(kāi)發(fā)手機(jī)中 Js 組件的類(lèi)型

1. 功能組件

只需編寫(xiě) Javascript 函數(shù)即可創(chuàng)建功能組件。具體來(lái)說(shuō)，函數(shù)式組件是那些接受 Props 并返回 JSX 的函數(shù)。功能組件可能會(huì)也可能不會(huì)以參數(shù)的形式接收數(shù)據(jù)。此外，功能組件沒(méi)有生命周期方法或狀態(tài)，但是可以通過(guò)簡(jiǎn)單地實(shí)現(xiàn) React Hooks 來(lái)添加它們。功能組件總是易于調(diào)試、閱讀和測(cè)試。

// Functional Component Exampleimport React from 'react';const HelloWorld = () => {
   return (
      <div>
         <p>Hello Emizen!</p>
      </div>
   )}export default HelloEmizen;

在上面的代碼圖中，它是一個(gè)簡(jiǎn)單的組件，帶有常量變量“Hello Emizen”。常量變量被分配給返回 JSX 的箭頭函數(shù)。功能組件不需要是箭頭函數(shù)，也可以使用常規(guī) JavaScript 函數(shù)簡(jiǎn)單地聲明。同時(shí)，Props 也可以傳入函數(shù)中，用于渲染 JSX 代碼中的數(shù)據(jù)。

2.類(lèi)組件

Class 組件是所有類(lèi)型中使用最多的組件。原因是類(lèi)組件具有執(zhí)行功能組件的每個(gè)功能的能力，同時(shí)還具有一些附加功能。它還可以有效地利用 React 的主要功能、道具、狀態(tài)和生命周期方法。但是，類(lèi)組件與功能組件相比相對(duì)更復(fù)雜。數(shù)據(jù)可以很容易地從一個(gè)類(lèi)組件傳遞到另一個(gè)類(lèi)組件。

// 類(lèi)組件示例import React from 'react';class HelloWorld extends React.Component {
   使成為（） {
      返回 （
         <div>
            <p>你好艾米森！</p>
         </div>
      )
   }}導(dǎo)出默認(rèn)的HelloEmizen；

在上面的例子中可以觀察到 class 組件使用了extends React.Componentafter class Hello Emizen。然后，它還需要render()返回 JSX 代碼的方法。在類(lèi)組件中，可以聲明一個(gè)狀態(tài)，將其設(shè)置為 JavaScript 對(duì)象，并用于props在生命周期方法中處于初始階段和更改狀態(tài)。它將需要 React Hooks 通過(guò)功能組件執(zhí)行這些操作。

3.純組件

純組件是人們可以編寫(xiě)的最簡(jiǎn)單、最快速的組件。由于純組件不會(huì)修改或依賴其范圍之外的不同變量的狀態(tài)，因此它們可以輕松替換簡(jiǎn)單的功能組件。僅返回渲染函數(shù)的組件最適合純組件。Pure 組件的最大用例是提供優(yōu)化。

React.Component和的最大區(qū)別在于React.PureComponent，純組件對(duì)狀態(tài)變化的比較淺。純組件自動(dòng)管理shouldComponentUpdate().

React 組件主要在以下情況下重新渲染：

setState()叫做
forceUpdate()叫做
props值已更新

4. 高階組件

也稱為 HOC 的高階組件不太像 React 組件，而更像是一種模式，這是 React 組合特性的結(jié)果。HOC 的主要用例是與其他組件共享邏輯。

// HOC Exampleimport React from 'react';import MyComponent from './components/MyComponent';class HelloEmizen extends React.Component {
   render() {
      return(
         <div>
            {this.props.myArray.map((element) => (
               <MyComponent data={element} key={element.key} />
            ))}
         </div>
      )
   }}export default HelloEmizen;

上面的代碼圖像有一個(gè)簡(jiǎn)單的組件來(lái)描述更高級(jí)別的組件。這里的關(guān)鍵代碼是this.props.myArray.map((element) => (<MyComponent />)。此函數(shù)返回組件。組件的數(shù)量?jī)H取決于數(shù)組中稱為 HOC 的元素?cái)?shù)量。該函數(shù)從 state 中獲取一個(gè)數(shù)組，從而通過(guò)將每個(gè)元素轉(zhuǎn)換為 React 組件來(lái)映射數(shù)組中的每個(gè)元素。

以下是高階組件的簡(jiǎn)單概要：

從 props 或 state 中獲取數(shù)據(jù)
映射數(shù)組并返回每個(gè)元素的 Reach 組件。

如何渲染 Js 開(kāi)發(fā)APP組件？

可以按照以下步驟來(lái)渲染 ReactJS 組件：

首先，創(chuàng)建一個(gè) ES6 類(lèi)，其名稱與 extends 相同React.Component。
一個(gè)空方法被添加到它，稱為render().
函數(shù)體被移動(dòng)到render()方法中。
在正文中替換為props。this.propsrender()
最后，刪除剩余的空函數(shù)聲明。

反應(yīng)嵌套組件

Reactjs 最好的事情之一是組件可以相互嵌套。此功能有助于顯著創(chuàng)建復(fù)雜的用戶界面。在這里，子組件嵌套在父組件內(nèi)。組件相互嵌套稱為內(nèi)部嵌套和外部嵌套。

導(dǎo)出：當(dāng)一個(gè)特定的模塊或文件被導(dǎo)出并在另一個(gè)模塊中使用時(shí)，它被稱為導(dǎo)出。
導(dǎo)入：當(dāng)特定模塊或文件被導(dǎo)入并在現(xiàn)有模塊中使用時(shí)，稱為導(dǎo)入。
以上就是JS開(kāi)發(fā)APP的介紹，對(duì)于從事js開(kāi)發(fā)人員有一定的參考價(jià)值，JS開(kāi)發(fā)制作手機(jī)APP是時(shí)代的趨勢(shì)，開(kāi)發(fā)功能多，速度快，可更新。