javascript - 避免在 React 中由对象字面量引起的重新渲染:如何处理对象中的变量?
问题描述
我在这篇文章React is Slow, React is Fast: Optimizing React Apps in Practice中读到:
实际上,每次将对象文字作为 prop 传递给子组件时,都会破坏纯度。
好吧,我明白了。所以最好避免这种情况是用对象创建一个变量,并将这个变量插入到道具中,就像这样:
import React from 'react';
const style = { marginTop: 10 };
const AnyComponent = (props) => (
<div style={style}>
...
</div>
)
但是如果 style 属性依赖于接收到的属性呢?对象应该在哪里?例如,我有这个组件:
import React from 'react';
const AnyComponent = (props) => (
<div style={{ marginTop: props.marginTop }}>
...
</div>
)
这样做是一个好习惯吗:
import React from 'react';
const style = (marginTop) => ({ marginTop })
const AnyComponent = (props) => (
<div style={style(props.marginTop)}>
...
</div>
)
[编辑] 我忘了说我的大部分组件都有状态,所以在这种情况下,这样做是个好主意:
import React from 'react';
class App extends React.Component {
style = () => ({
marginTop: this.props.marginTop
})
render() {
return(
<div style={this.style()}>
</div>
)
}
}
解决方案
以前你不能在函数式组件中这样做(尽管你可以使用 memoization)但是现在由于 React 钩子的支持,你可以这样做:
const AnyComponent = (props) => {
const style = useMemo(() => ({ marginTop: props.marginTop }), [props.marginTop]);
<div style={style}>
...
</div>
}
不,你不能使用这个:
import React from 'react';
const style = (marginTop) => ({ marginTop })
const AnyComponent = (props) => (
<div style={style(props.marginTop)}>
...
</div>
)
因为它还通过每次调用样式函数在每次重新渲染 AnyComponent 时创建一个新对象。
推荐阅读
- java - 将数据传递给查询,而不是更新
- ms-access - 向正在运行的 cmd 进程发送命令
- java - 每分钟都会调用远程 Web 服务,而无需我调用它们
- android - Android Studio Generate Signed APK 运行正常,但 Build APK 失败并出现错误(不识别证书)
- javascript - 隐藏悬停css上不是直接子元素的元素
- r - 在 Rmarkdown 中设置交互式(Rstudio)和非交互式(knitr)使用的工作目录
- javascript - 在链接到这些的下拉菜单中列出文件
- angular - angular2 如何只选择 .clicked DOM 元素
- python - 无法导入 geopandas(Python 3.7 64 位)
- flutter - Flutter:如何为任何容器实现旋转和平移/移动手势?