在React中this容易遇到的问题详解

神评论

1.为什么父组件给子组件传递函数时，必须绑定 this？

当父组件将一个方法作为回调函数传递给子组件时，需要绑定 this 是因为函数的 this 值在 JavaScript 中是在调用时确定的，而不是在声明时确定的。在子组件中调用这个回调函数时，this 的默认值会是 undefined（在严格模式下）或全局对象（在非严格模式下），而不是父组件的实例。这通常会导致意外的行为和错误。
为了确保回调函数在子组件中执行时，其

1. this

复制代码

值仍然指向父组件的实例，我们需要使用

1. bind

复制代码

方法将

1. this

复制代码

明确绑定到父组件实例。这样，无论回调函数在哪里被调用，其

1. this

复制代码

值始终保持一致。
以下是一个简单的例子：

1. class Parent extends React.Component {
   
2.   constructor(props) {
   
3.     super(props);
   
4.     this.state = {
   
5.       value: 'Hello',
   
6.     };
   
7.     this.handleClick = this.handleClick.bind(this); // 绑定 this
   
8.   }
   
9. 
   
10.   handleClick() {
    
11.     console.log(this.state.value); // 输出 "Hello"
    
12.   }
    
13. 
    
14.   render() {
    
15.     return <Child onClick={this.handleClick} />;
    
16.   }
    
17. }
    
18. 
    
19. class Child extends React.Component {
    
20.   render() {
    
21.     return <button onClick={this.props.onClick}>Click me</button>;
    
22.   }
    
23. }

复制代码

在这个例子中，我们在 Parent 组件的构造函数中使用 bind 方法将 this.handleClick 的 this 值绑定到 Parent 组件实例。这样，无论 handleClick 在哪里被调用，其 this 值始终指向 Parent 组件实例。因此，当在子组件中点击按钮时，handleClick 函数能够正确地访问 Parent 组件的 state。
如果您不想在构造函数中使用 bind，还可以使用箭头函数来自动绑定 this：

1. class Parent extends React.Component {
   
2.   state = {
   
3.     value: 'Hello',
   
4.   };
   
5. 
   
6.   handleClick = () => {
   
7.     console.log(this.state.value); // 输出 "Hello"
   
8.   };
   
9. 
   
10.   render() {
    
11.     return <Child onClick={this.handleClick} />;
    
12.   }
    
13. }

复制代码

在这个例子中，我们使用了类属性（Class Field）语法并将

1. handleClick

复制代码

定义为箭头函数。箭头函数会自动绑定其定义时的上下文，所以不再需要手动绑定

1. this

复制代码

。

a.为什么在子组件中调用回调函数时，this 的默认值会是 undefined

首先，我们需要了解 JavaScript 函数中的

1. this

复制代码

是如何工作的。在 JavaScript 中，函数的

1. this

复制代码

值取决于函数是如何被调用的。这里有几种情况：

• 当作为对象的方法调用时，
  1. this

  复制代码
  指向该对象。
  

1. const obj = {
   
2.   value: 'Hello',
   
3.   method() {
   
4.     console.log(this.value);
   
5.   },
   
6. };
   
7. 
   
8. obj.method(); // 输出 "Hello"，此时 this 指向 obj

复制代码

• 当作为一个普通函数调用时，
  1. this

  复制代码
  指向全局对象（非严格模式下）或
  1. undefined

  复制代码
  （严格模式下）。
  

1. function example() {
   
2.   console.log(this);
   
3. }
   
4. 
   
5. example(); // 非严格模式下输出全局对象，严格模式下输出 undefined

复制代码

• 当使用箭头函数时，
  1. this

  复制代码
  会捕获定义时的上下文。
  

1. const obj = {
   
2.   value: 'Hello',
   
3.   method: () => {
   
4.     console.log(this.value);
   
5.   },
   
6. };
   
7. 
   
8. obj.method(); // 输出 undefined，因为箭头函数捕获了全局上下文

复制代码

现在我们回到 React 的子组件中调用父组件传递的回调函数的问题。当在子组件中调用回调函数时，它实际上是在一个事件处理程序（如

1. onClick

复制代码

）中作为普通函数调用的。这意味着它不会绑定到子组件实例，而是绑定到全局对象（非严格模式下）或

1. undefined

复制代码

（严格模式下）。
要解决这个问题，我们需要确保回调函数中的

1. this

复制代码

在调用时始终指向父组件实例。这就是为什么我们需要在父组件中使用

1. bind

复制代码

方法或箭头函数来绑定

1. this

复制代码

的原因。通过这样做，我们可以确保回调函数在子组件中调用时，其

1. this

复制代码

值始终指向父组件实例。

2.react 中的组件四种绑定 this 方法

使用箭头函数可以在定义的时候就绑定事件 。
而不再是调用时决定this指向。
在 React 中，有四种常见的方法来绑定组件方法中的

1. this

复制代码

：

• 构造函数中绑定：在组件的构造函数中显式地为方法绑定
  1. this

  复制代码
  。这是比较传统的方式。
  

1. class MyComponent extends React.Component {
   
2.   constructor(props) {
   
3.     super(props);
   
4.     this.state = { ... };
   
5.     this.handleClick = this.handleClick.bind(this);
   
6.   }
   
7. 
   
8.   handleClick() {
   
9.     // ...
   
10.   }
    
11. 
    
12.   render() {
    
13.     return <button onClick={this.handleClick}>Click me</button>;
    
14.   }
    
15. }

复制代码

• 箭头函数作为类属性：使用类属性（class properties）语法，将组件方法定义为箭头函数。这样，
  1. this

  复制代码
  会自动绑定到当前组件实例。
  

1. class MyComponent extends React.Component {
   
2.   state = { ... };
   
3. 
   
4.   handleClick = () => {
   
5.     // ...
   
6.   };
   
7. 
   
8.   render() {
   
9.     return <button onClick={this.handleClick}>Click me</button>;
   
10.   }
    
11. }

复制代码

• 箭头函数作为回调：在 JSX 中直接使用箭头函数，这样也可以保证
  1. this

  复制代码
  被正确绑定。但请注意，每次组件渲染时，都会创建一个新的箭头函数，可能会导致性能问题。
  

1. class MyComponent extends React.Component {
   
2.   state = { ... };
   
3. 
   
4.   handleClick() {
   
5.     // ...
   
6.   }
   
7. 
   
8.   render() {
   
9.     return <button onClick={() => this.handleClick()}>Click me</button>;
   
10.   }
    
11. }

复制代码

• 使用
  1. Function.prototype.bind()

  复制代码
  方法作为回调：在 JSX 中直接使用
  1. Function.prototype.bind()

  复制代码
  方法来为回调函数绑定
  1. this

  复制代码
  。同样，这种方式也会在每次渲染时创建一个新的函数，可能会导致性能问题。
  

1. class MyComponent extends React.Component {
   
2.   state = { ... };
   
3. 
   
4.   handleClick() {
   
5.     // ...
   
6.   }
   
7. 
   
8.   render() {
   
9.     return <button onClick={this.handleClick.bind(this)}>Click me</button>;
   
10.   }
    
11. }

复制代码

推荐使用构造函数绑定或箭头函数作为类属性的方法，因为它们在组件实例创建时只绑定一次，不会在每次渲染时创建新的函数。

3.箭头函数+回调 在定义时就绑定this

这里使用箭头函数作为回调函数的原因是为了确保

1. setCount

复制代码

函数在点击按钮时正确地执行。箭头函数可以自动绑定

1. this

复制代码

，使得

1. this

复制代码

值在定义时就已经确定。
如果你直接写成这样：

1. <button onClick={setCount(count + 1)}>Increment</button>

复制代码

这会导致一个问题：在组件渲染时，

1. setCount(count + 1)

复制代码

就会被立即执行，而不是等到用户点击按钮时。这样一来，按钮点击事件就没有意义了，而且还可能导致无限循环的渲染。
而使用箭头函数作为回调：

1. <button onClick={() => setCount(count + 1)}>Increment</button>

复制代码

这样，当用户点击按钮时，箭头函数会被执行，而

1. setCount

复制代码

会在箭头函数内部被调用，实现了正确的点击事件处理。
总之，使用箭头函数可以确保

1. setCount

复制代码

在点击事件触发时被调用，而不是在组件渲染时就执行。
以上就是在React中this容易遇到的问题详解的详细内容，更多关于React his的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/2845105tt.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！