开发者社区> 问答> 正文

这里为什么需要a的第二种写法啊?

已解决

image.png 这里为什么需要a的第二种写法啊?

展开
收起
游客dndzx3dbvf2jq 2022-08-09 22:07:36 237 0
1 条回答
写回答
取消 提交回答
  • 推荐回答

    在React 里画,要将类的原型方法通过props传给子组件,传统写法需要bind(this)。

    否则方法执行时this会找不到:

    <button onClick=(this.handleClick.bind(this))></button>

    或者

    <button onClick=((e) » this,handleClick(e))se/buttons

    这种写法难看不说,还会对 React 组件的 shouldComponentUpdate 优化造成影响。

    这是因为 React 提供了 shouldComponentUpdate 让开发者能够控制避免不必要的 render,还提供了在 shouldComponentUpdate 自动进行 Shallow Compare 的 React.PureComponent, 继承自 PureComponent 的组件只要 props 和 state 中的值不变,组件就不会重新 render。

    然而如果用了 bind this,每次父组件渲染,传给子组件的 props.onClick 都会变,PureComponent 的 Shallow Compare 基本上就失效了,除非你手动实现 shouldComponentUpdate.

    使用 Public Class Fields 的这种写法,就解决了这个问题。

    2022-08-09 23:24:25
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
技术图谱:由专家组参与技术图谱的绘制与编写,知识与实践的结合让开发者们掌握学习路线与逻辑,快速提升技能 电子书:电子书由阿里内外专家打造,供开发者们下载学习,更与课程相结合,使用户更易理解掌握课程内容 训练营:学习训练营 深入浅出,专家授课,带领开发者们快速上云 精品课程:汇集知识碎片,解决技术难题,体系化学习场景,深入浅出,易于理解 技能自测:提供免费测试,摸底自查 体验实验室:学完即练,云资源免费使用
问答排行榜
最热
最新

相关电子书

更多
《0代码搭应用》 立即下载
不止代码 立即下载
低代码开发师(初级)实战教程 立即下载

相关实验场景

更多