如何使用备忘录优化 React Hooks 中的代码

Question

我有这个code。

这是代码片段

  const [indicators, setIndicators] = useState([]);
  const [curText, setCurText] = useState('');
  const refIndicator = useRef()

  useEffect(() => {
    console.log(indicators)
  }, [indicators]);

  const onSubmit = (e) => {
    e.preventDefault();
    setIndicators([...indicators, curText]);
    setCurText('')
  }

  const onChange = (e) => {
    setCurText(e.target.value);
  }


  const MemoInput = memo((props)=>{
    console.log(props)
    return(
      <ShowIndicator name={props.name}/>
    )
  },(prev, next) => console.log('prev',prev, next)
  );

每次我在表格中添加时它都会显示每个指标。

问题是 ShowIndicator 每次我添加内容时都会更新。

有没有办法限制我的应用程序呈现的时间，因为例如我创建了 3 ShowIndicators，然后它也会呈现 3 次，我认为这在很长一段时间内非常昂贵运行.

我也在考虑使用 useRef 只是为了不让我的应用程序在每次输入新文本时都呈现，但我不确定它是否是正确的实现，因为大多数文档建议通过使用状态作为处理程序来使用受控组件当前值。

Answer 1

React.memo 如果父组件重新渲染（并且道具相同），将停止您的子组件渲染，但这对您的情况没有帮助，因为您已经在 App 组件中定义了该组件。每次 App 呈现时，您都在创建 MemoInput 的新引用。

更新示例：https://codesandbox.io/s/currying-tdd-mikck

Answer 2

Link 到沙盒：

https://codesandbox.io/s/musing-kapitsa-n8gtj

App.js

  // const MemoInput = memo(
  //   props => {
  //     console.log(props);
  //     return <ShowIndicator name={props.name} />;
  //   },
  //   (prev, next) => console.log("prev", prev, next)
  // );

  const renderList = () => {
    return indicators.map((data,index) => {
      return <ShowIndicator key={index} name={data} />;
    });
  };

ShowIndicator.js

import React from "react";

const ShowIndicator = ({ name }) => {
  console.log("rendering showIndicator");
  const renderDatas = () => {
    return <div key={name}>{name}</div>;
  };

  return <>{renderDatas()}</>;
};

export default React.memo(ShowIndicator);    // EXPORT React.memo

Answer 3

观察给定的沙盒应用程序行为，似乎整个应用程序 在有 n 个指标时呈现 n 次。

我分叉了沙箱并将列表移动到另一个功能组件（并且 memo 基于 prev 和 next 属性对其进行了编辑。

This will ensure my 'List' is rendered every time a new indicator is added. The whole app will render only when a new indicator is added to the list.

检查这个从你的沙箱中分叉出来的沙箱 - https://codesandbox.io/embed/avoid-re-renders-react-l4rm2

如何使用备忘录优化 React Hooks 中的代码

How to optimize code in React Hooks using memo

javascript

reactjs

react-hooks

memo