我正在映射一个对象数组，并在一张卡片中显示它们的值，每个对象都有标题、评论和dateposts字段。dateposts字段通过我所做的一个函数将其显示在卡片上为"发布2小时前"或"发布2分钟前"。这是更新，虽然每次状态的变化，这不是一个问题，当它发布几天前，甚至几个小时，因为没有什么变化，但当一个新的帖子首次上传和保存，被显示的日期几乎每次你键入一个键更新，因为它从"发布1秒前"到"发布2秒前"，到"发布3秒前"等... .有什么我可以做的，以解决这个问题，我已经考虑过保存组件在不同的状态和显示，但我不认为这将工作的状态需要更新，每次用户更改标题或评论，以便它可以实时显示。
下面是一个JSX的例子，它显示卡片，以防它有帮助。timeCalc是计算post创建时间的函数
{posts.map(item => (
<div>
<div>
<h1>{item.title}</h1>
<h3>{item.comment}</h3>
</div>
<div>
<h3>{timeCalc(item.datePosted)}</h3>
</div>
</div>
))}
我会将代码提取到它自己的组件中，然后该组件可以使用几种可能的技术之一来记住它第一次呈现的值。下面是useMemo:
{posts.map(item => <Post item={item}/>)}
//... elsewhere:
const Post = ({ item }) => {
const time = useMemo(() => {
return timeCalc(item.datePosted);
}, []);
return (
<div>
<div>
<h1>{item.title}</h1>
<h3>{item.comment}</h3>
</div>
<div>
<h3>{time}</h3>
</div>
</div>
);
}
记住初始值的其他可能方法是使用state:
const Post = ({ item }) => {
// Note that i have no need for `setTime`, as this value will never be changed
const [time] = useState(timeCalc(item.datePosted));
或ref:
const Post = ({ item }) => {
const timeRef = useRef(timeCalc(item.datePosted));
// ...
<h3>{timeRef.current}</h3>
您可以创建一个组件并使用React.memo和areEqual函数记忆以避免当道具(如日期)相同时重新渲染。
演示:
const inputDate = new Date().toISOString();
function timeCalc(date) {
return moment(date).fromNow()
}
function TimeCalc({date}) {
return <h4>{timeCalc(date)}</h4>
}
function areEqual(prevProps, nextProps) {
return prevProps.date === nextProps.date
}
const TimeCalcMemo = React.memo(TimeCalc, areEqual);
function App() {
const [v, sv] = React.useState('')
return (<div>
<div>{v}</div>
<div>Enter something after a minute</div>
<input type="text" value={v} onChange={e => sv(e.target.value)} />
<TimeCalcMemo date={inputDate}/> memoized
<TimeCalc date={inputDate}/> not memoized
</div>)
}
ReactDOM.render(<App />, document.getElementById('mydiv'))<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="mydiv"></div>
</body>您也可以尝试条件渲染。
const lastUpdated = timeCalc(item.datePosted)
{posts.map(item => (
<div>
<div>
<h1>{item.title}</h1>
<h3>{item.comment}</h3>
</div>
<div>
{
(compare timestamp here using moment.js or anyway you prefer) &&
<h3>{timeCalc(item.datePosted)}</h3>
}
</div>
</div>
))}