5.React.memo 性能优化

这篇具有很好参考价值的文章主要介绍了5.React.memo 性能优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

性能优化, React.memo

1. 函数组件修改同一个值,不会重新渲染.类组件会setState会重新渲染
(当响应式数据没有发生改变时候, 更新时不会重新执行, 不会重新render随机数没有变)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style></style>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
  <script src="../babel.min.js"></script>
  <script src="../lodash.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    /* 
    性能优化, React.memo
    1. 函数组件修改同一个值,不会重新渲染.类组件会setState会重新渲染
    (当响应式数据没有发生改变时候, 更新时不会重新执行, 不会重新render随机数没有变)

    2. React.memo类似纯组件,可提高组件性能表现(类组件PureComponent)
    当传递的值发生改变,重新render,当没有发生改变不重新render .
    加Math.random(),验证
    */

    let app = document.querySelector('#app');
    let root = ReactDOM.createRoot(app);
    let { useState } = React;

    // 不重新Render
    let Welcome = (props) => {  
      const [ count, setCount ] = useState(0);
      const handleClick= () => {
        setCount(1);
      }
      console.log(123);
      return (
        <div>
          <button onClick={handleClick}>点击</button>
          hello Welcome { Math.random() }
        </div>
      );
    }
    
    let element = (
      <Welcome />
    );
    root.render(element);
  </script>
</body>

</html>

2. React.memo类似纯组件,可提高组件性能表现(类组件PureComponent)

当传递的值发生改变,重新render,当没有发生改变不重新render .
加Math.random(),验证
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
  <script src="../babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">

    let app = document.querySelector('#app');
    let root = ReactDOM.createRoot(app);
    let { useState } = React;

    let Welcome = (props) => {  
      const [ count, setCount ] = useState(0);
      const handleClick= () => {
        setCount(1);
      }
      return (
        <div>
          <button onClick={handleClick}>点击</button>
          hello Welcome
          <Head count={count} />
        </div>
      );
    }

    // 不包裹,每次都更新
    // 包裹,依赖更新时候才会更新
    let Head = React.memo(() => {
      return (
        <div>hello Head, { Math.random() }</div>
      )
    })
    
    let element = (
      <Welcome />
    );
    root.render(element);


  </script>
</body>
</html>

文章来源地址https://www.toymoban.com/news/detail-672414.html

到了这里,关于5.React.memo 性能优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react中的formik如何使用

    Formik 是一个用于处理表单状态和验证的 React 库。它提供了一种简化和统一的方式来处理复杂的表单逻辑,包括表单值的管理、表单验证、表单提交和错误处理等。 安装 Formik 和 Yup(用于表单验证): 导入所需的模块:   创建表单组件: 渲染表单组件: 通过上述步骤,你就

    2024年02月13日
    浏览(30)
  • 【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】

    使用React Hooks后,你很快就会发现,代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks, 可以将组件分成多个函数、管理状态和副作用,并且不必声明类即可调用React内置的功能。而且,上述所有的操作

    2024年02月14日
    浏览(34)
  • React hooks之useEffect、useMemo优化技巧

    useEffect使用JSON.stringfy进行过滤,避免重复执行 将数组直接放入依赖数组可能不会按预期工作,因为数组比较是基于引用而不是内容。也就是说,如果数组引用没有变,即使数组内容发生了变化,副作用也不会重新运行。或者数组内饿哦那个没有改变但是引用却发生变化时,

    2024年02月12日
    浏览(46)
  • React.Memo和useMemo的区别?

    hello world欢迎来到前端的新世界 😜当前文章系列专栏:react.js 🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹 💖感谢大家支持!您的观看就是作者创作的动力 React.memo和useMemo是React中两个不同的特性,用

    2024年02月06日
    浏览(47)
  • 理解React页面渲染原理,如何优化React性能?

    当使用React编写应用程序时,可以使用JSX语法来描述用户界面的结构。JSX是一种类似于HTML的语法,但实际上它是一种JavaScript的扩展,用于定义React元素。React元素描述了我们想要在界面上看到的内容和结构。 在运行React应用程序时,JSX会被转换成真实的DOM元素,这个过程主要

    2024年02月08日
    浏览(43)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(二)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 前面的API:aho

    2024年02月12日
    浏览(30)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(一)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 1. useRequest useR

    2024年02月12日
    浏览(32)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(四)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: API介绍合集:

    2024年02月11日
    浏览(34)
  • React.memo每天一个小知识,有例子

    react的子组件props接收父组件的属性 运用场景:子组件如果接收多个参数,父组件传的值有变化,就更新(多次请求接口,再有图片请求的时候,费劲),比如打开弹出框,open就是true/false, 但是你只想在单据不一样的时候更新,就需要自定义逻辑, 用了React.memo回调函数判断。

    2024年01月19日
    浏览(41)
  • 【实战】 六、用户体验优化 - 加载中和错误状态处理(下) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(十)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月15日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包