我有这个代码。
这是代码片段
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 次。
我分叉了沙盒并将列表移动到另一个功能组件(并根据prev
和next
道具对其进行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