作者aoksc (重出江湖)
看板Ajax
标题[问题] React问题请教
时间Sun Mar 5 16:38:26 2017
https://codepen.io/gaearon/pen/Xjoqwm?editors=0010
请问一下这个范例中
this.handleToggleClick = this.handleToggleClick.bind(this);
为什麽一定要加个bind(this)?
这个this看起来应该指的是class Page
但我还是不太懂为什麽要这样写
请问这该往哪方面去查呢?
谢谢
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 118.233.159.254
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1488703109.A.1C3.html
1F：→ illl: extends React.Component 03/05 17:03
2F：→ steven11329: 你可以把那行注解掉就感受得到差异了！ 03/05 18:43
3F：→ async: 我才刚学react，刚好有一段影片有说明为什麽要bind 03/05 18:53
4F：推 Hevak: 因为你把这个function传给子组件呼叫的时候，子组件呼叫的 03/05 19:54
5F：→ Hevak: 当下call site是子组件，所以function里面的this会变成子组 03/05 19:54
6F：→ Hevak: 件而不是父组件 03/05 19:54
7F：→ Hevak: 可是因为你希望改的是父组件的状态(this应该要是父组件)， 03/05 19:55
8F：→ Hevak: 所以你要先把function在父组件给.bind(this)，让他的this 03/05 19:56
9F：→ Hevak: 固定在父组件(.bind()会回传一个this被固定成传给.bind的 03/05 19:56
10F：→ Hevak: 参数的function) 03/05 19:56
11F：→ Hevak: 这样不管你把这个bind过的function传到哪里去（例如传到子 03/05 19:56
12F：→ Hevak: 组件），他的this都还是当时bind着的那个父组件，就不会指 03/05 19:57
13F：→ Hevak: 错this 03/05 19:57
14F：→ Hevak: 《你所不知道的 JS：范畴与Closures，this与物件原型》这本 03/05 19:58
15F：→ Hevak: 书对this的概念讲得很详细，推荐读一下，这样你就会更清楚 03/05 19:58
16F：→ Hevak: 为什麽同一个function在不同地方呼叫的时候，this可能是不 03/05 19:59
17F：→ Hevak: 同个object 03/05 19:59
18F：→ Hevak: .bind 主要就是用来解决 this.state、this.setState 的 thi 03/05 20:01
19F：→ Hevak: s 在传到其他地方之後不会是父组件的问题，所以才要在父组 03/05 20:01
20F：→ Hevak: 件的 constructor 就先做 .bind(this) 复写成 this 固定为 03/05 20:01
21F：→ Hevak: 父组件的 function 03/05 20:01
22F：推 iamnodoubt: this是在execution context时才会被创立,简单讲就是 03/05 22:15
23F：→ iamnodoubt: this会因为function在何处被执行而有所不同 03/05 22:16
24F：→ iamnodoubt: 延伸阅读..react解决bind(this)的方法 03/05 22:17
25F：→ iamnodoubt: goo.gl/Gj9juQ 03/05 22:18
26F：推 st1009: 感谢大大 <3随然不是原PO，不过受教了<(_ _)> 03/07 15:57