15321250321
010-86462584

JS开发手机APP

2022-06-02

JS开发手机中 Js 组件的类型

1. 功能组件

只需编写 Javascript 函数即可创建功能组件。具体来说，函数式组件是那些接受 Props 并返回 JSX 的函数。功能组件可能会也可能不会以参数的形式接收数据。此外，功能组件没有生命周期方法或状态，但是可以通过简单地实现 React Hooks 来添加它们。功能组件总是易于调试、阅读和测试。

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

在上面的代码图中，它是一个简单的组件，带有常量变量“Hello Emizen”。常量变量被分配给返回 JSX 的箭头函数。功能组件不需要是箭头函数，也可以使用常规 JavaScript 函数简单地声明。同时，Props 也可以传入函数中，用于渲染 JSX 代码中的数据。

2.类组件

Class 组件是所有类型中使用最多的组件。原因是类组件具有执行功能组件的每个功能的能力，同时还具有一些附加功能。它还可以有效地利用 React 的主要功能、道具、状态和生命周期方法。但是，类组件与功能组件相比相对更复杂。数据可以很容易地从一个类组件传递到另一个类组件。

// 类组件示例import React from 'react';class HelloWorld extends React.Component {
   使成为（） {
      返回 （
         <div>
            <p>你好艾米森！</p>
         </div>
      )
   }}导出默认的HelloEmizen；

在上面的例子中可以观察到 class 组件使用了extends React.Componentafter class Hello Emizen。然后，它还需要render()返回 JSX 代码的方法。在类组件中，可以声明一个状态，将其设置为 JavaScript 对象，并用于props在生命周期方法中处于初始阶段和更改状态。它将需要 React Hooks 通过功能组件执行这些操作。

3.纯组件

纯组件是人们可以编写的最简单、最快速的组件。由于纯组件不会修改或依赖其范围之外的不同变量的状态，因此它们可以轻松替换简单的功能组件。仅返回渲染函数的组件最适合纯组件。Pure 组件的最大用例是提供优化。

React.Component和的最大区别在于React.PureComponent，纯组件对状态变化的比较浅。纯组件自动管理shouldComponentUpdate().

React 组件主要在以下情况下重新渲染：

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

4. 高阶组件

也称为 HOC 的高阶组件不太像 React 组件，而更像是一种模式，这是 React 组合特性的结果。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 />)。此函数返回组件。组件的数量仅取决于数组中称为 HOC 的元素数量。该函数从 state 中获取一个数组，从而通过将每个元素转换为 React 组件来映射数组中的每个元素。

以下是高阶组件的简单概要：