国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

cppprimer / 2707人閱讀

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

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

在使用react的過程中,常常因?yàn)楹瘮?shù)的this問題導(dǎo)致執(zhí)行結(jié)果不如預(yù)期。現(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 (
) } }

示例代碼實(shí)現(xiàn)了簡(jiǎ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
  })
}

此時(shí)val.target為元素,但是this為undefined,此時(shí)調(diào)用this.setState會(huì)報(bào)錯(cuò)。

類的方法默認(rèn)是不會(huì)綁定this的,所以這里丟失了函數(shù)執(zhí)行的上下文。那么如果在綁定時(shí)候加上一對(duì)括號(hào):



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

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

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

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

這時(shí)功能正常。

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

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

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

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

參考資料

this 綁定

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/108608.html

相關(guān)文章

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

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

    mrli2016 評(píng)論0 收藏0
  • React Hooks 解析(上):基礎(chǔ)

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

    yy736044583 評(píng)論0 收藏0
  • react: 組件初識(shí) && 生命周期 && 相關(guān)說明

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

    jokester 評(píng)論0 收藏0
  • 淺析 React 生命周期

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

    lansheng228 評(píng)論0 收藏0
  • react搭建后臺(tái)管理(react初窺)

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

    wangjuntytl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<