组件化

提高代码复用率，降低开发成本，提高开发效率

模块化

提高代码复用率，降低开发成本，提高开发效率

懒加载

减少首屏加载时间

keep-alive

1. 减少网络请求

应用场景

keep-alive
1.案例一   activated 的使用
	keep-alive 列表数据的详情页
	1. 第一次会发起请求，并记录请求的id
    2. 再次进入相同页面如果id相同，不再进行请求数据
    
    类似这样来来进行实现
    activated() {
        console.log(this.stop);
        if (this.stop) {
            this.age++
            this.stop = false
        }
    },
    
2. 案例二
	注册和登录组件页面的切换，缓存用户输入的内容，避免切换重复输入
	通过keep-alive 缓存input框中输入的内容，提升体验

异步组件

减少首屏加载时间

1. 减少首次加载时间

按需加载

<!-- 按需加载 -->
<!-- App.vue -->
<template>
  <div id="app">
    <button @click="loadLazyComponent">Load Lazy Component</button>
    <div v-if="showLazyComponent">
      <LazyComponent />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showLazyComponent: false,
      };
    },
    methods: {
      loadLazyComponent() {
        import('./components/LazyComponent.vue').then((module) => {
          // 当组件加载完成后，将 showLazyComponent 置为 true，组件将被渲染
          this.showLazyComponent = true;
        });
      },
    },
  };
</script>

防抖

节流

React

memo

记忆组件可以子组件的props未发生变化的时候，可以避免子组件的无效渲染。

- 未使用memo的情况下，父组件增加num会导致 组件间的log也会打印，
- 添加上memo子组件的porps为发生变化，不会产生重新渲染

import React, { useState, memo } from 'react'
// import Child from './component/Child'
export default function Index() {
    let [num, setNum] = useState(0)
    return (
        <div>
            <div>父组件</div>
            <div>{num}</div>
            <button onClick={() => { setNum(num + 1) }}>加一</button>
            <Child />
        </div>
    )
}


// 子组件
const Child = memo(() => {
    console.log('子组件渲染了');
    return (
        <div>
            <div>子组件</div>
        </div>
    )
})