Skip to main content

重复渲染

问题背景​

使用React做前端开发时，会用到Hooks函数组件，可以在函数式组件中创建一些状态，当状态发生改变时，页面会重新渲染以更新展示数据，但页面中的状态改变时有时只需要渲染部分组件即可，且当Hooks使用较多时，这种重复渲染会带来不好的视觉体验

自定义hooks-通用模式​

在我们在编写自定义hooks的时候，要特别～特别～特别关注的是传进去什么，返回什么。

返回的东西是我们真正需要的。更像一个工厂，把原材料加工，最后返回我们。

我们设计的自定义react-hooks应该是长的这样的。

DEMO​

实现功能：格式化数组将小写转成大写

逻辑组件(自定义hook)​

/* 自定义hooks 用于格式化数组将小写转成大写 */
function useFormatList(list){
   return list.map(item=>{
       console.log(1111)
       return item.toUpperCase()
   })
}

渲染组件​

import React, { useState } from "react";
import useFormatList from "./useFormatList";

export default function App() {
  const [number, setNumber] = useState(0);

  const list = ["aaa", "bbb", "ccc"];
  const newList = useFormatList(list);

  return (
    <div className="App">
      <div className="list">
        {newList.map((item) => (
          <div key={item}>{item}</div>
        ))}
      </div>

      <div className="number">
        <div>{number}</div>
        <button onClick={() => setNumber(number + 1)}>add</button>
      </div>
    </div>
  );
}

如果自定义hooks没有设计好，比如返回一个改变state的函数，但是没有加条件限定限定，就有可能造成不必要的上下文的执行，更有甚的是组件的循环渲染执行。

如上述问题，我们格式化父组件传递过来的list数组，并将小写变成大写，但是当我们点击add。

理想状态下数组不需要重新format，但是实际跟着执行format。无疑增加了性能开销。

优化后​

import { useMemo } from "react";

function useFormatList(list) {
    return useMemo(() => list.map(item => {
        console.log(1111)
        return item.toUpperCase()
    }), [])
}

链接​

优秀文章