react 函数this相关

cppprimer 发布于2019-08-26 12:23 / 2708人阅读

摘要：函数相关在使用的过程中，常常因为函数的问题导致执行结果不如预期。组件在渲染过程中触发函数，函数中调用会再次调用，导致死循环。如果在最开始使用为函数绑定上下文，去掉绑定函数时的括号，这时功能正常。

react 函数this相关

在使用react的过程中，常常因为函数的this问题导致执行结果不如预期。现梳理下这块的问题，先看代码：

import React from "react";

class MsgList extends React.PureComponent {
  render() {
    return (
      
        {this.props.list.map((item, index) => ({item}))}
      
    )
  }
}

export default class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputMsg: "",
      list: [123]
    }
  }
  
  handleInput = (val) => {
    this.setState({
      inputMsg: val.target.value
    })
  }

  handleSubmit = () => {
    const text = this.state.inputMsg
    if (text) {
      const msg = [...this.state.list, text]
      this.setState({
        inputMsg: "",
        list: msg
      })
    }
  }

  render() {
    return (
      
        
        
        
      
    )
  }
}

示例代码实现了简单的元素添加和列表展示功能。

其中函数绑定和定义的方式如下：

// 绑定
onChange={this.handleInput}
// 定义
handleInput = (val) => {
  this.setState({
    inputMsg: val.target.value
  })
}

定义函数的方式有很多种，比如：

handleInput(val) {
  console.log(val.target)
  console.log(this)
  this.setState({
    inputMsg: val.target.value
  })
}

此时val.target为元素，但是this为undefined，此时调用this.setState会报错。

类的方法默认是不会绑定this的，所以这里丢失了函数执行的上下文。那么如果在绑定时候加上一对括号：



// 函数定义
handleInput(val) {
  console.log(val.target)
  console.log(this)
  this.setState({
      inputMsg: val.target.value
  })
}

此时添加括号，虽然绑定了上下文，但这样会导致函数在组件渲染的时候被触发，而不是等到渲染完成时通过点击触发，且无法响应onChange动作。组件在渲染过程中触发函数，函数中调用setState()会再次调用render，导致死循环。

如果在最开始使用.bind()为函数绑定上下文，去掉绑定函数时的括号，

constructor(props) {
  super(props)
  this.state = {
    inputMsg: "hello",
    list: [123]
  }
  this.handleInput = this.handleInput.bind(this)
}

这时功能正常。

而最开始我们定义函数时用箭头函数绑定了上下文，所以也能实现想要的功能。

除此之外，还有一种书写方式也可以正常工作，不过实际上与最开始的写法是一样的。

this.handleInput(e)}/>

小结

使用react的时候要注意this的指向，类默认是不会为方法绑定this，要么在开始的时候手动绑定this，要么可以使用箭头函数自动绑定上下文。如果不是希望在组件渲染时就触发的函数，那么绑定函数时不能加括号。

参考资料

this 绑定

云服务器 GPU云服务器相关函数 this[] this _this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108608.html

React Hooks入门: 基础

摘要：当组件安装和更新时，回调函数都会被调用。好在为我们提供了第二个参数，如果第二个参数传入一个数组，仅当重新渲染时数组中的值发生改变时，中的回调函数才会执行。前言　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励，希望大家多多关注呀！React 16.8中新增了Hooks特性，并且在React官方文档中新增...

mrli2016 2019-08-23 15:36 评论0 收藏0
React Hooks 解析（上）：基础

摘要：第一次了解这项特性的时候，真的有一种豁然开朗，发现新大陆的感觉。为了解决这一痛点，才会有剪头函数的绑定特性。它同时具备和三个生命周期函数的执行时机。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 React Hooks 是从 v16.8 引入的又一开创性的新特性。第一次了解这项特性...

yy736044583 2019-08-23 17:01 评论0 收藏0
react: 组件初识 && 生命周期 && 相关说明

react组件参考：https://facebook.github.io/re... react的组件是其核心思想部分，react允许将整个ui设计分割称为独立的、可复用的隔离模块，react的组件是一个抽象的类，直接使用reacy.component是没有很大意义的，所以一般使用的方法就是定义一个 class 来继承这个component，并且需要实现方法 render（）；就像下面一样： ...

jokester 2019-08-20 16:35 评论0 收藏0
浅析 React 生命周期

摘要：在使用组件的进行组件实例化时，得到的便是其返回值。也就是说，如果其子组件的或发生改变时，只会取决于那个组件的方法的返回值。文章为本人原创，原文见本人个博浅析生命周期一浅析生命周期二 Overview 最近常有学习React相关的技术，写了几个React的小Demo，使用 React/Express 技术栈。实在太小，羞于拿出来细说。React 的确是一个值得追随的技术。但React体系...

lansheng228 2019-08-20 14:15 评论0 收藏0
react搭建后台管理（react初窥）

摘要：前言以前一直是用进行的开发于是决定年后弄一弄所以年后这段时间也就一直瞎弄可算是看到成果了本来是想写一个类似仿今日头条那样的项目来入手后来又寻思还不如写个后台管理呢。于是乎自己便着手简单的搭建了一个集中设置的版本。前言以前一直是用vue进行的开发, 于是决定年后弄一弄react, 所以年后这段时间也就一直瞎弄react, 可算是看到成果了本来是想写一个类似 Vue仿今日头条那样...

wangjuntytl 2019-08-22 15:23 评论0 收藏0