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



我有这个代码。

这是代码片段

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

观察给定的沙盒应用程序行为,当有 n 个指标时,似乎整个应用程序会渲染 n 次

我分叉了沙盒并将列表移动到另一个功能组件(并根据prevnext道具对其进行memo

这将确保每次添加新指标时都会呈现我的"列表"。 仅当将新指示器添加到列表时,整个应用程序才会呈现。

查看这个从您的沙盒分叉的沙盒 - https://codesandbox.io/embed/avoid-re-renders-react-l4rm2

如果父组件重新渲染(并且如果 props 相同(,React.memo 将停止子组件渲染,但这对您没有帮助,因为您已经在应用程序组件中定义了组件。每次应用呈现时,您都在创建 MemoInput 的新引用。

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

链接到沙盒:

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} />;
});
};

显示指示器.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

相关内容

  • 没有找到相关文章

最新更新