本篇內(nèi)容主要講解“React組件綁定this的方式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“React組件綁定this的方式有哪些”吧!

創(chuàng)新互聯(lián)建站專注于中小企業(yè)網(wǎng)站建設(shè)、策劃制作、運(yùn)行維護(hù)，主要提供一站式的企業(yè)網(wǎng)站建設(shè)服務(wù)。建站類型：公司網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司獨(dú)立站等。創(chuàng)新互聯(lián)不是單一的建網(wǎng)站，而是結(jié)合企業(yè)的建站目標(biāo)去規(guī)劃網(wǎng)站怎么建，如何利于運(yùn)營(yíng)，尋求適合的建站方案。其次，網(wǎng)站后臺(tái)操作的便捷性也是網(wǎng)站制作過程中的重點(diǎn)，創(chuàng)新互聯(lián)建站的網(wǎng)站后臺(tái)簡(jiǎn)單便捷，真正實(shí)現(xiàn)了零基礎(chǔ)操作。

用react進(jìn)行開發(fā)組件時(shí)，我們需要關(guān)注一下組件內(nèi)部方法this的指向，react定義組件的方式有兩種，一種為函數(shù)組件，一種為類組件，類組件內(nèi)部可以定義一些方法，這些方法的this需要綁定到組件實(shí)例上，小編這里總結(jié)了一下，一共有四種方案：

第一種方案，在構(gòu)造函數(shù)內(nèi)部使用bind綁定this，這樣做的好處是，避免每次渲染時(shí)都要重新綁定，代碼如下：

import React, {Component} from 'react'
class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}        this.handleClick = this.handleClick.bind(this)    }
    handleClick (e) {        console.log(this.state.message)    }
    render () {        return (            <div>                <button onClick={ this.handleClick }>Say Hello</button>            </div>        )    }}

第二種方案同樣是用bind，但是這次不再構(gòu)造函數(shù)內(nèi)部使用，而是在render函數(shù)內(nèi)綁定，但是這樣的話，每次渲染都需要重新綁定，代碼如下：

import React, {Component} from 'react'
class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}    }
    handleClick (name, e) {        console.log(this.state.message + name)    }
    render () {        return (            <div>                <button onClick={ this.handleClick.bind(this, '趙四') }>Say Hello</button>            </div>        )    }}

第三種方案是在render函數(shù)中，調(diào)用方法的位置包裹一層箭頭函數(shù)，因?yàn)榧^函數(shù)的this指向箭頭函數(shù)定義的時(shí)候其所處作用域的this，而箭頭函數(shù)在render函數(shù)中定義，render函數(shù)this始終指向組件實(shí)例，所以箭頭函數(shù)的this也指向組件實(shí)例，代碼如下：

class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}    }
    handleClick (e) {        console.log(this.state.message)    }
    render () {        return (            <div>                <button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>            </div>        )    }

以上這種方式有個(gè)小問題，因?yàn)榧^函數(shù)總是匿名的，如果你打算移除監(jiān)聽事件，是做不到的，那么怎么做才可以移除呢？看下一種方案。

第四種方案，代碼如下：

class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}    }     handleClick = (e) => {        console.log(this.state.message)    }     render () {        return (            <div>                <button onClick={ this.handleClick }>Say Hello</button>            </div>        )    }}

不過，在Classes中直接賦值是ES7的寫法，ES6并不支持，你有兩種選擇，一種是配置你的開發(fā)環(huán)境支持ES7，一種使采用如下方式，下面這種方式是第四種方案的另外一種寫法，代碼如下：

class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}        this.handleClick = (e) => {            console.log(this.state.message)        }    }     render () {        return (            <div>                <button onClick={ this.handleClick }>Say Hello</button>            </div>        )    }

以上便是react組件內(nèi)部方法this綁定的四種方案，如果還有其它方案歡迎留言。

資料引用：

https://blog.csdn.net/sinat_17775997/article/details/56839485

到此，相信大家對(duì)“React組件綁定this的方式有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

標(biāo)題名稱：React組件綁定this的方式有哪些
文章網(wǎng)址：http://jinyejixie.com/article24/pggcje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、微信小程序、、虛擬主機(jī)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)