React JS和React Native性能差异的可能原因?

huangapple go评论58阅读模式
英文:

Possible reasons for performance difference between React JS and React Native?

问题

I'm here to assist with the translation. Here's the translation of the provided text:

我正在写我的学士论文,比较使用React JS和React Native分别开发的渐进式Web应用(Progressive web apps)和原生应用(native applications)。其中,我正在测量的一个功能是一个词语搜索器,它接受一个文本字符串并计算其中给定单词的出现次数。我原以为在这种情况下原生应用会更快,因为这是一个计算任务,并且我在我的移动设备上同时运行这两个应用程序。然而,当运行和计时测试时,渐进式Web应用(PWA)的速度要快得多,我找不到任何可以解释这一现象的研究。

在这种情况下,渐进式Web应用(PWA)更快的原因是什么?毕竟,被测量的功能应该被视为计算性的,因此原生应用应该能更好地利用硬件,对吗?

两个应用程序的代码是相同的。

英文:

I am writing my bachelors thesis where i compare Progressive web apps and native applications using React JS and React native, respetively. One functionality I am measuring the time for is a word searcher, that takes in a string text and counts the number of occurances of a given word in it. I believed that the native application would be the quicker one in this instance since it is a computational task, and I am running both applications on my mobile device. However, when running and timing the tests, the PWA is coming out quicker by a lot, and I cannot find any research that would explain it.

What is the reason for the PWA being faster in this instance when the functionality being measure should be seen as computational and thus the native application should be able to make better use of the hardware?

The code is identical for both applications:

import React, { Component } from 'react';
import TextSearchView from '../view/TextSearchView';

class TextSearchPresenter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTerm: 'the',
      result: null,
      text: 'The quick brown fox jumps over the lazy dog',
      loading: false,
      error: null,
      filterTime: 0,
    };
  }

  handleSearchTermChange = (event) => {
    const searchTerm = event.target.value;
    this.setState({ searchTerm });
  };
  

  handleTextChange = event => {
    const text = event.target.value;
    this.setState({ text });
  };

  handleSearch = async () => {
    this.setState({ loading: true });
    const filterStart = performance.now();
    const { searchTerm, text } = this.state;
    const regex = new RegExp(`\\b${searchTerm}\\b`, 'gi');
    const count = (text.match(regex) || []).length;
    const filterEnd = performance.now();
    const filterTime = filterEnd - filterStart;
    this.setState({ result: count, loading: false, filterTime });
  };

  handleError = (error) => {
    this.setState({ error, loading: false });
  };

  render() {
    const { searchTerm,text, result, loading, error, filterTime } = this.state;
    return (
      <TextSearchView
        searchTerm={searchTerm}
        text={text}
        result={result}
        loading={loading}
        onSearchTermChange={this.handleSearchTermChange}
        onTextChange={this.handleTextChange}
        onSearch={this.handleSearch}
        onError={this.handleError}
        filterTime={filterTime}
      />
    );
  }
  
}

export default TextSearchPresenter;

答案1

得分: 1

PWA 在打开您的网站时使用 JS 引擎 https://en.wikipedia.org/wiki/JavaScript_engine

最新版本的 React Native 使用 Hermes https://hermesengine.dev/

我猜在这种情况下,性能可能会有所不同。例如,Hermes 不像浏览器中的 JS 引擎那样具有完整的实现(Date https://github.com/facebook/hermes/issues/136)。此外,某些功能可能会有所不同。

英文:

PWA uses a JS engine when you open your site https://en.wikipedia.org/wiki/JavaScript_engine

React Native in the latest versions uses Hermes https://hermesengine.dev/

I guess in this case we can have different performances. For example, Hermes does not have a full realization like the JS engine in browsers (Date https://github.com/facebook/hermes/issues/136). Also, some functionality can be different.

huangapple
  • 本文由 发表于 2023年5月22日 16:00:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/76304104.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定