15321250321
010-86462584

APP开发 > APP学院 > APP开发工具 >

JS开发手机APP

2022-06-02 750

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 组件来映射数组中的每个元素。  

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

  1. 从 props 或 state 中获取数据

  2. 映射数组并返回每个元素的 Reach 组件。

如何渲染 Js 开发APP组件?

可以按照以下步骤来渲染 ReactJS 组件: 

  • 首先,创建一个 ES6 类,其名称与 extends 相同React.Component。 

  • 一个空方法被添加到它,称为render().

  • 函数体被移动到render()方法中。

  • 在正文中替换为props。this.propsrender()

  • 最后,删除剩余的空函数声明。

反应嵌套组件

Reactjs 最好的事情之一是组件可以相互嵌套。此功能有助于显着创建复杂的用户界面。在这里,子组件嵌套在父组件内。组件相互嵌套称为内部嵌套和外部嵌套。

  • 导出:当一个特定的模块或文件被导出并在另一个模块中使用时,它被称为导出。 

  • 导入:当特定模块或文件被导入并在现有模块中使用时,称为导入。

  • 以上就是JS开发APP的介绍,对于从事js开发人员有一定的参考价值,JS开发制作手机APP是时代的趋势,开发功能多,速度快,可更新。

客服QQ:121446412 联系电话:15321250321

京ICP备17026149号-1

版权所有@2011-2022 北京天品互联APP开发公司 公司地址:北京市海淀区上地科实大厦D座11层

收缩
  • 15321250321