英文:
How to use React.memo() in a file with named exports?
问题
我习惯于使用 export default React.memo(SomeComponent); 这样 React 可以对我的组件进行记忆。
但在一个使用命名导出的文件中，我该如何使用 React.memo()？
export { React.memo(MainPostTopic), React.memo(MainPostSubtopic) };
上面的代码行不起作用。
英文:
I'm used to export default React.memo(SomeComponent); so React can memoize my components.
But in a file where I'm using named exports. How can I use React.memo() ?
export { React.memo(MainPostTopic), React.memo(MainPostSubtopic) };
The line above doesn't work.
EXAMPLE FILE
function MainPostTopic(props) {
console.log('Rendering MainPostTopic...');
return (
<LS.Topic_H2 id={props.id}>
{props.value}
</LS.Topic_H2>
);
}
function MainPostSubtopic(props) {
console.log('Rendering MainPostSubtopic...');
return (
<LS.Subtopic_H3>
{props.value}
</LS.Subtopic_H3>
);
}
export { MainPostTopic, MainPostSubtopic };
答案1
得分: 26
这是我最终做的：
const MainPostTopic = React.memo(
function MainPostTopic(props) {
console.log('渲染 MainPostTopic...');
return (
...
);
}
);
const MainPostSubtopic = React.memo(
function MainPostSubtopic(props) {
console.log('渲染 MainPostSubtopic...');
return (
...
);
}
);
export { MainPostTopic, MainPostSubtopic };
英文:
This is what I've ended up doing:
const MainPostTopic = React.memo(
function MainPostTopic(props) {
console.log('Rendering MainPostTopic...');
return (
...
);
}
);
const MainPostSubtopic = React.memo(
function MainPostSubtopic(props) {
console.log('Rendering MainPostSubtopic...');
return (
...
);
}
);
export { MainPostTopic, MainPostSubtopic };
I kept the same name for the functions and the exports.
答案2
得分: 13
尝试
export const MemoMainPostTopic = React.memo(MainPostTopic);
或
const MainPostTopic = memo(() => {
...
});
export { MainPostTopic };
<details>
<summary>英文:</summary>
Try
export const MemoMainPostTopic = React.memo(MainPostTopic);
or
const MainPostTopic = memo(() => {
...
});
export { MainPostTopic };
</details>
# 答案3
**得分**: 5
```ts
`default` 不是导出的必要命名要求。
const MemoizedMainPostTopic = React.memo(MainPostTopic)
export { MemoizedMainPostTopic }
英文:
Exports that aren't default need to be named.
const MemoizedMainPostTopic = React.memo(MainPostTopic)
export { MemoizedMainPostTopic }
答案4
得分: 1
只需为要导出的对象属性命名即可。
const MainPostTopicComponent = React.memo(MainPostTopic);
const MainPostSubtopicComponent = React.memo(MainPostSubtopic);
export {
MainPostTopicComponent,
MainPostSubtopicComponent
};
希望这可以帮助！
英文:
You just need to give name to the object properties you are exporting.
const MainPostTopicComponent = React.memo(MainPostTopic);
const MainPostSubtopicComponent = React.memo(MainPostSubtopic);
export {
MainPostTopicComponent,
MainPostSubtopicComponent
};
Hope this can help!
答案5
得分: 0
使用默认的 memo：
import { memo } from "react";
const Todos = ({ todos }) => {
return (
<>
<h2>我的待办事项</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
现在只有在 todos 属性发生变化时组件才会重新渲染。
英文:
Using memo with default:
import { memo } from "react";
const Todos = ({ todos }) => {
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
Now only if the todos property changed the component will re-render
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论