日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react中關于函數調用()與bind?this的原因及分析_React

作者：漫漫想想 ? 更新時間： 2023-04-27 編程語言

關于函數調用()與bind this的原因

以下內容主要基于onClick的回調函數解決方案

官方文檔對于jsx回調函數解釋

  • 對待 JSX 回調函數中的 this，在 JavaScript 中，class 的方法默認不會綁定 this。
  • 如果你忘記綁定this.handleClick 并把它傳入了 onClick，當你調用這個函數的時候 this 的值為 undefined。
//函數組件則就是 無狀態組件 ?只負責數據的展示（靜態）
//類組件這就是有狀態組件 ? ? ?負責更新ui，讓頁面動起來
//狀態（state ）就是數據，是組件內部的私有數據，只能在組件內部使用
//state的值是對象，即就是一個組件內部可以擁有多個數據
class StateComponent extends React.Component{
? //使用es6簡化辦法初始化
? //state={
? // ?count:0
? //}
? ?constructor(props) {
? ? super(props);
? ? this.state = {count: 0};
? ? this.addClick3 = this.addClick3.bind(this);
? }
? addClick(){
? ? this.setState({count : this.state.count + 1});
? }
? addClick2=()=>{
? ? this.setState({count : this.state.count + 1});
? }
? addClick3(){
? ? this.setState({count : this.state.count + 1});
? }
? render(){
? ? return(
? ? ? <>
? ? <button onClick={()=>{
? ? ? this.setState({
? ? ? ? count: this.state.count+1
? ? ? })
? ? }}>有狀態組件,{this.state.count}</button>

? ? <button onClick={this.addClick.bind(this)} >不使用constructor，使用注釋的es6簡化寫法</button>
? ? <button onClick={()=>this.addClick()} >箭頭函數使用</button>
? ? <button onClick={this.addClick2} >使用箭頭函數</button>
? ? <button onClick={this.addClick3} >constructor中進行綁定后可使用</button>
? ? </>
? ? )
? }
}

由于初學js以及react框架，所以對于jsx插值表達式中的函數調用有些疑問

function check(){
}

1、有些插值表達式調用函數不需要使用（）,如{check};但是有些地方調用則需要使用（），如{check()}

2、在使用react中的onClick函數時，調用函數如果函數內部沒有使用this，則可以直接調用{check}；如果使用了this則需要使用特殊處理，如最頂部的代碼所示。

答1

在界面直接使用jsx插值表達式，如果是希望直接返回函數結果，需要使用{check()}；如果不需要直接調用函數，而是等待某些觸發條件再調用函數{check}。這里函數的（）即就是函數調用，而函數名是指向函數體的指針。

react官網對于以下問題的解答可以很好地看出（）的區別

為什么我的函數每次組件渲染時都會被調用？

確保你在傳遞一個函數給組件時，沒有調用這個函數：

hadleClick(){
?return <div>hello world</div>
?//函數體內部沒有使用this
}
render() {
? // Wrong: handleClick is called instead of passed as a reference!
? return <button onClick={this.handleClick()}>Click Me</button>
}

正確做法是，傳遞函數本身（不帶括號）：

render() {
? // Correct: handleClick is passed as a reference!
? return <button onClick={this.handleClick}>Click Me</button>
}

答2

js本身有一個特性，如果直接調用函數，盡管函數內部使用了this也可以正常使用。但是如果函數內容使用了this，但是不是直接調用這個函數，則內部的this會丟失，this會變成undefined。

所以下面代碼中renderList()直接調用，使用{this.renderList()}，盡管函數體內部使用了this，也不需要特殊處理。

但是onClick就不是直接調用。這里的onClick就相當于一個中間量。

函數體內部的this指向會丟失。

class Comment extends React.Component{
? ? state={
? ? ? ? ?comments:[
? ? ? ? ? ? {id:1,name:'jack',comment:"沙發"},
? ? ? ? ? ? {id:2,name:"tom",comment:'沙發不錯'},
? ? ? ? ? ? {id:3,name:"blue",comment:"還行"}
? ? ? ? ?]
? ? }
? ? renderList(){
? ? ? ? return(
? ? ? ? ? ? this.state.comments.kength===0?
? ? ? ? ? ? ? ? <div className="no-comment" >暫無評論，快去評論</div>:
? ? ? ? ? ? ? ? <ul >
? ? ? ? ? ? ? {this.state.comments&&this.state.comments.map(comment=>
? ? ? ? ? ? ? ? ? <li key={comment.id}><h3>評論人:{comment.name}</h3>
? ? ? ? ? ? ? ? ? <p>評論內容 :{comment.content}</p>
? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? )}?
? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ??
? ? ? ? )
? ? }
? ? ? render(){
? ? ? ? return(
? ? ? ? ? ? <>
? ? ? ? ? ? {this.renderList()}
? ? ? ? ? ? ?</>
? ? ? ? )
? ? ? }

}

this的丟失可以使用箭頭函數來解決，因為箭頭函數具有如下特質：

箭頭函數的時候，箭頭函數會默認幫我們綁定外層 this 的值，所以在箭頭函數中 this 的值和外層的 this 是一樣的。

因此可以通過使用箭頭函數避免this的丟失，當然為了避免this的丟失還有很多種方式

1、使用es5的語法，在初始化component的時候使用constructor，對函數進行綁定

2、在中間量聲明時使用bind(this) 進行綁定

3、中間量聲明函數時使用箭頭函數，可以直接進行函數調用；或者將函數內容直接書寫在箭頭函數內（注意這里進行函數調用時需要使用函數名+（）,因為在函數內部聲明是直接調用）

4、最常用的方式，使用箭頭函數聲明函數，則可以直接調用，不需要額外處理

總結

原文鏈接：https://blog.csdn.net/qq_44017078/article/details/125570697

欄目分類
最近更新