1

我有这个代码。

这是代码片段

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

4

3 回答 3

1

沙盒链接：

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

应用程序.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
于 2019-09-26T07:44:21.943 回答
1

观察给定的沙盒应用程序行为，当有 n 个指示符时，似乎整个应用程序渲染了 n 次。

我分叉了沙箱并将列表移动到另一个功能组件（并memo基于prev和nextprops.

这将确保每次添加新指标时都会呈现我的“列表”。只有在列表中添加了新指标时，整个应用才会呈现。

签出这个从你那里分叉的沙箱 - https://codesandbox.io/embed/avoid-re-renders-react-l4rm2

于 2019-09-26T07:44:42.970 回答
1

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

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

于 2019-09-26T07:37:33.073 回答