将 React.memo 与映射集合一起使用
use React.memo with mapped collection
当组件由地图“生成”时,react.memo(或挂钩版本)不知何故无法工作。
代码示例:https://codesandbox.io/embed/react-memo-example-iuqf4
const Item = ({ step }) => <div>{step.name}</div>;
const MemoItem = React.memo(Item, (prevProps, nextProps) => {
console.info("memo"); //no console
if (prevProps.show === nextProps.show) {
return true;
}
return false;
});
const initialSteps = [{
name: "Pim",
show: true
}, {
name: "Christa",
show: false
}, {
name: "Henk",
show: true
}, {
name: "klaas",
show: true
}];
{steps.steps.map((step,
<MemoItem key={index} step={step} />
))}
我的期望是每个呈现的项目都被“记忆”(并在控制台中显示日志)。
一切正常。在第一次渲染之后,相等比较函数 仅 运行s。 在第一次渲染时没有任何东西可以 "compare" 道具,因为那是它被记忆的时候。因此,您在控制台中看不到 "memo"
日志 - 它呈现一次,但 App 组件没有 re-render,因此不会调用比较函数。
尝试向您的应用程序组件添加一个简单的状态更新以强制 re-render。您将在控制台中看到 "memo"
行,但是记忆组件函数不会 运行 因为它们已成功记忆。
class App extends Component {
render() {
const { steps } = this.props;
return (
<div onClick={() => {
this.setState({ time: Date.now() })
}}>
{steps.steps.map((step, index) => (
<MemoItem key={index} step={step} />
))}
</div>
);
}
}
编辑:我要指出的是,您进行此优化几乎毫无意义。 React.memo
存在于组件 re-render 导致严重性能问题的非常有限的情况下。或许你是作为学习 React 的练习来做的,但在绝大多数情况下,React 自身内部的优化是绰绰有余的。过早的优化是不好的!
当组件由地图“生成”时,react.memo(或挂钩版本)不知何故无法工作。
代码示例:https://codesandbox.io/embed/react-memo-example-iuqf4
const Item = ({ step }) => <div>{step.name}</div>;
const MemoItem = React.memo(Item, (prevProps, nextProps) => {
console.info("memo"); //no console
if (prevProps.show === nextProps.show) {
return true;
}
return false;
});
const initialSteps = [{
name: "Pim",
show: true
}, {
name: "Christa",
show: false
}, {
name: "Henk",
show: true
}, {
name: "klaas",
show: true
}];
{steps.steps.map((step,
<MemoItem key={index} step={step} />
))}
我的期望是每个呈现的项目都被“记忆”(并在控制台中显示日志)。
一切正常。在第一次渲染之后,相等比较函数 仅 运行s。 在第一次渲染时没有任何东西可以 "compare" 道具,因为那是它被记忆的时候。因此,您在控制台中看不到 "memo"
日志 - 它呈现一次,但 App 组件没有 re-render,因此不会调用比较函数。
尝试向您的应用程序组件添加一个简单的状态更新以强制 re-render。您将在控制台中看到 "memo"
行,但是记忆组件函数不会 运行 因为它们已成功记忆。
class App extends Component {
render() {
const { steps } = this.props;
return (
<div onClick={() => {
this.setState({ time: Date.now() })
}}>
{steps.steps.map((step, index) => (
<MemoItem key={index} step={step} />
))}
</div>
);
}
}
编辑:我要指出的是,您进行此优化几乎毫无意义。 React.memo
存在于组件 re-render 导致严重性能问题的非常有限的情况下。或许你是作为学习 React 的练习来做的,但在绝大多数情况下,React 自身内部的优化是绰绰有余的。过早的优化是不好的!