react 实现pure render的时候,bind(this)隐患
react 实现pure render的时候,bind(this)隐患
1 2 3 4 5 6 7 8 9 10 11 12 | export default class Parent extends Component { ... render() { const {name,age} = this .state; return ( <div> <Child name={name} age={age} onClick={ this ._handleClick.bind( this )}></Child> //bug 所在 </div> ) } ... } |
发现一个问题,对于Child这个子组件来说,在父组件re-render的时候,即使Child得前后两个props都没改变,它依旧会re-render。。即使用immutable.js也不好使。。。原来啊,父组件每次render,_handleClick都会执行bind(this) 这样_handleClick的引用每次都会改。。所以Child前后两次props其实是不一样的。。 那怎么办?把bind(this)去掉?不行 还必须得用。真正的答案是 让父组件每次render 不执行bind(this),直接提前在constructor执行好,修改之后
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | export default class Parent extends Component { constructor(props){ super (props) this ._handleClick= this ._handleClick.bind( this ) //改成这样 } render() { const {name,age} = this .state; return ( <div> <Child name={name} age={age} onClick={ this ._handleClick}></Child> </div> ) } ... } |
.
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步