成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react 函數(shù)this相關(guān)

cppprimer / 2717人閱讀

摘要：函數(shù)相關(guān)在使用的過程中，常常因為函數(shù)的問題導(dǎo)致執(zhí)行結(jié)果不如預(yù)期。組件在渲染過程中觸發(fā)函數(shù)，函數(shù)中調(diào)用會再次調(diào)用，導(dǎo)致死循環(huán)。如果在最開始使用為函數(shù)綁定上下文，去掉綁定函數(shù)時的括號，這時功能正常。

react 函數(shù)this相關(guān)

在使用react的過程中，常常因為函數(shù)的this問題導(dǎo)致執(zhí)行結(jié)果不如預(yù)期?，F(xiàn)梳理下這塊的問題，先看代碼：

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 (
      

        
        
        
      

    )
  }
}

示例代碼實現(xiàn)了簡單的元素添加和列表展示功能。

其中函數(shù)綁定和定義的方式如下：

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

定義函數(shù)的方式有很多種，比如：

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

此時val.target為元素，但是this為undefined，此時調(diào)用this.setState會報錯。

類的方法默認是不會綁定this的，所以這里丟失了函數(shù)執(zhí)行的上下文。那么如果在綁定時候加上一對括號：



// 函數(shù)定義
handleInput(val) {
  console.log(val.target)
  console.log(this)
  this.setState({
      inputMsg: val.target.value
  })
}

此時添加括號，雖然綁定了上下文，但這樣會導(dǎo)致函數(shù)在組件渲染的時候被觸發(fā)，而不是等到渲染完成時通過點擊觸發(fā)，且無法響應(yīng)onChange動作。組件在渲染過程中觸發(fā)函數(shù)，函數(shù)中調(diào)用setState()會再次調(diào)用render，導(dǎo)致死循環(huán)。

如果在最開始使用.bind()為函數(shù)綁定上下文，去掉綁定函數(shù)時的括號，

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

這時功能正常。

而最開始我們定義函數(shù)時用箭頭函數(shù)綁定了上下文，所以也能實現(xiàn)想要的功能。

除此之外，還有一種書寫方式也可以正常工作，不過實際上與最開始的寫法是一樣的。

this.handleInput(e)}/>
小結(jié)

使用react的時候要注意this的指向，類默認是不會為方法綁定this，要么在開始的時候手動綁定this，要么可以使用箭頭函數(shù)自動綁定上下文。如果不是希望在組件渲染時就觸發(fā)的函數(shù)，那么綁定函數(shù)時不能加括號。

參考資料

this 綁定

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108608.html

相關(guān)文章

  • React Hooks入門: 基礎(chǔ)

    摘要：當(dāng)組件安裝和更新時，回調(diào)函數(shù)都會被調(diào)用。好在為我們提供了第二個參數(shù)，如果第二個參數(shù)傳入一個數(shù)組，僅當(dāng)重新渲染時數(shù)組中的值發(fā)生改變時，中的回調(diào)函數(shù)才會執(zhí)行。 前言 　　首先歡迎大家關(guān)注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現(xiàn)，能堅持下去也是靠的是自己的熱情和大家的鼓勵，希望大家多多關(guān)注呀！React 16.8中新增了Hooks特性，并且在React官方文檔中新增...

    mrli2016 評論0 收藏0

  • React Hooks 解析（上）：基礎(chǔ)

    摘要：第一次了解這項特性的時候，真的有一種豁然開朗，發(fā)現(xiàn)新大陸的感覺。為了解決這一痛點，才會有剪頭函數(shù)的綁定特性。它同時具備和三個生命周期函數(shù)的執(zhí)行時機。 歡迎關(guān)注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 React Hooks 是從 v16.8 引入的又一開創(chuàng)性的新特性。第一次了解這項特性...

    yy736044583 評論0 收藏0

  • react: 組件初識 && 生命周期 && 相關(guān)說明

    react組件 參考：https://facebook.github.io/re... react的組件是其核心思想部分，react允許將整個ui設(shè)計分割稱為獨立的、可復(fù)用的隔離模塊，react的組件是一個抽象的類，直接使用reacy.component是沒有很大意義的，所以一般使用的方法就是定義一個 class 來繼承這個component，并且需要實現(xiàn)方法 render（）；就像下面一樣： ...

    jokester 評論0 收藏0

  • 淺析 React 生命周期

    摘要：在使用組件的進行組件實例化時，得到的便是其返回值。也就是說，如果其子組件的或發(fā)生改變時，只會取決于那個組件的方法的返回值。文章為本人原創(chuàng)，原文見本人個博淺析生命周期一淺析生命周期二 Overview 最近常有學(xué)習(xí)React相關(guān)的技術(shù)，寫了幾個React的小Demo，使用 React/Express 技術(shù)棧。實在太小，羞于拿出來細說。React 的確是一個值得追隨的技術(shù)。但React體系...

    lansheng228 評論0 收藏0

  • react搭建后臺管理（react初窺）

    摘要：前言以前一直是用進行的開發(fā)于是決定年后弄一弄所以年后這段時間也就一直瞎弄可算是看到成果了本來是想寫一個類似仿今日頭條那樣的項目來入手后來又尋思還不如寫個后臺管理呢。于是乎自己便著手簡單的搭建了一個集中設(shè)置的版本。 前言 以前一直是用vue進行的開發(fā), 于是決定年后弄一弄react, 所以年后這段時間也就一直瞎弄react, 可算是看到成果了 本來是想寫一個 類似 Vue仿今日頭條 那樣...

    wangjuntytl 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<