react实现pure render时bind(this)隐患需注意!
pure render 我就不多说了,附上我另一片文章链接 react如何性能达到最大化(前传)
不论你用不用immutable,只要你想达到pure render,下面值得你注意!
一天我和往常一样,开开心心得写着react,用着@pureRender,
export default class extends Component { ... render() { const {name,age} =this.state; return ( <div> <Person name={name} age={age} onClick={this._handleClick.bind(this)}></Person>//bug 所在 </div> ) } ... }
发现一个问题,对于Person这个子组件来说,在父组件re-render的时候,即使Person得前后两个props都没改变,它依旧会re-render,即使用immutable.js也不好使。
原来啊,父组件每次render,_handleClick都会执行bind(this) 这样_handleClick的引用每次都会改,所以Person前后两次props其实是不一样的。
那怎么办?把bind(this)去掉?不行 还必须得用
真正的答案是 让父组件每次render 不执行bind(this),直接提前在constructor执行好,修改之后
export default class extends Component { constructor(props){ super(props) this._handleClick=this._handleClick.bind(this)//改成这样 } render() { const {name,age} =this.state; return ( <div> <Person name={name} age={age} onClick={this._handleClick}></Person> </div> ) } ... }
参考:React.js pure render performance anti-pattern
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Remix集成antd和pro-components的过程示例
这篇文章主要为大家介绍了Remix集成antd和pro-components的过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03react-router v4如何使用history控制路由跳转详解
这篇文章主要给大家介绍了关于react-router v4如何使用history控制路由跳转的相关资料,文中通过示例代码介绍的的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2018-01-01React router cache route实现缓存页面流程介绍
react-router自身没有路由缓存的特性,在5.x版本之前,我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化,react-router-cache-route没有提供相应的支持2023-01-01详解如何使用React和MUI创建多选Checkbox树组件
这篇文章主要为大家详细介绍了如何使用 React 和 MUI(Material-UI)库来创建一个多选 Checkbox 树组件,该组件可以用于展示树形结构的数据,并允许用户选择多个节点,感兴趣的可以了解下2024-01-01
最新评论