react 函數this相關

cppprimer 發布于2019-08-26 12:23 / 2715人閱讀

摘要：函數相關在使用的過程中，常常因為函數的問題導致執行結果不如預期。組件在渲染過程中觸發函數，函數中調用會再次調用，導致死循環。如果在最開始使用為函數綁定上下文，去掉綁定函數時的括號，這時功能正常。

react 函數this相關

在使用react的過程中，常常因為函數的this問題導致執行結果不如預期?，F梳理下這塊的問題，先看代碼：

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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