JS開發(fā)手機APP

2022-06-02

JS開發(fā)手機中 Js 組件的類型

1. 功能組件

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

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

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

2.類組件

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

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

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

3.純組件

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

React.Component和的最大區(qū)別在于React.PureComponent，純組件對狀態(tài)變化的比較淺。純組件自動管理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;

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

以下是高階組件的簡單概要：

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

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

可以按照以下步驟來渲染 ReactJS 組件：

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

反應嵌套組件

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

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