大学生html个人博客,个人博客分享

### 不要在render的函数中绑定值

假设你有一个项目列表，每个项目都传递一个唯一的参数到父方法。为了绑定参数，你可能会这么做：

```

this.likeComment(user.id)} />

```

这个问题会导致每次父组件render方法被调用时，一个新的函数被创建，已将其传入likeComment。这会有一个改变每个子组件props的副作用，它将会造成他们全部重新渲染，即使数据本身没有发生变化。

为了解决这个问题，只需要将父组件的原型方法的引用传递给子组件。子组件的likeComment属性将总是有相同的引用，这样就不会造成不必要的重新渲染。

```

然后再子组件中创建一个引用了传入属性的类方法：

```

class CommentItem extends PureComponent {

...

handleLike() {

this.props.likeComment(this.props.userID)

}

...

}

```

### 不要在render方法里派生数据

考虑一下你的配置组件将从一系列文章中展示用户最喜欢的十篇文章

```

render() {

const { posts } = this.props

const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9)

return //...

}

```

每次组件重新渲染时topTen都将有一个新的引用，即使posts没有改变并且派生数据也是相同的。这将造成列表不必要的重新渲染。

你可以通过缓存你的派生数据来解决这个问题。例如，设置派生数据在你的组件state中，仅当posts更新时它才更新。

```

componentWillMount() {

this.setTopTenPosts(this.props.posts)

}

componentWillReceiveProps(nextProps) {

if (this.props.posts !== nextProps.posts) {

this.setTopTenPosts(nextProps)

}

setTopTenPosts(posts) {

this.setState({

topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9)

})

}

```

如果你正在使用Redux，可以考虑使用reselect来创建"selectors"来组合和缓存派生数据。

大学生html个人博客,个人博客分享相关推荐

kdevelop用法_weixin_44594953的博客-CSDN博客_kdevelop
kdevelop用法_weixin_44594953的博客-CSDN博客_kdevelop
【无标题】ubuntu20.04 开机引导后黑屏光标闪现无法进入图形桌面的解决方案_Denis.Zzzzzzzz?的博客-CSDN博客_ubuntu20黑屏光标闪烁
ubuntu20.04 开机引导后黑屏光标闪现无法进入图形桌面的解决方案_Denis.Zzzzzzzz?的博客-CSDN博客_ubuntu20黑屏光标闪烁
怎么禁止/开启Ubuntu自动更新升级_豆豆技术派的博客-CSDN博客_ubuntu 自动更新
怎么禁止/开启Ubuntu自动更新升级_豆豆技术派的博客-CSDN博客_ubuntu 自动更新
Kdevelop的简单使用和调试_JunJun~的博客-CSDN博客_kdevelop使用教程
Kdevelop的简单使用和调试_JunJun~的博客-CSDN博客_kdevelop使用教程
cmake使用示例与整理总结_QTVLC的博客-CSDN博客_cmake使用示例与整理施公队演示时用的blog B zhan
cmake使用示例与整理总结_QTVLC的博客-CSDN博客_cmake使用示例与整理
add-apt-repository命令详解_Dcr_Hs的博客-CSDN博客_add-apt-repository
add-apt-repository命令详解_Dcr_Hs的博客-CSDN博客_add-apt-repository
Ubuntu安装Ceres库-安装依赖时报错：E：无法定位软件包 libcxsparse3.1.2_朱国鑫的博客-CSDN博客
Ubuntu安装Ceres库-安装依赖时报错:E:无法定位软件包 libcxsparse3.1.2_朱国鑫的博客-CSDN博客
Ubuntu18.04安装g2o，及问题解决_HyperZhu的博客-CSDN博客_ubuntu18.04安装g2o
Ubuntu18.04安装g2o,及问题解决_HyperZhu的博客-CSDN博客_ubuntu18.04安装g2o sudo apt-get install cmake libeigen3-dev ...
当了十年 IT 程序员，我转型做自动驾驶开发的这五年”_《新程序员》编辑部的博客-CSDN博客
"当了十年 IT 程序员,我转型做自动驾驶开发的这五年"_<新程序员>编辑部的博客-CSDN博客
ubuntu 安装Pangolin 过程_余辉亮的学习笔记的博客-CSDN博客_pangolin安装
ubuntu 安装Pangolin 过程_余辉亮的学习笔记的博客-CSDN博客_pangolin安装

大学生html个人博客,个人博客分享

大学生html个人博客,个人博客分享相关推荐

最新文章

热门文章