การเรียกใช้ฟังก์ชันใน React

สิ่งเหล่านี้ใช้แทนกันได้หรือเปล่า?

คำตอบสั้น ๆ : ไม่

มาดูตัวอย่างข้อมูลต่างๆ ที่คุณโพสต์กัน:

someFunction() vs someFunction

ด้วยรูปแบบเดิม คุณกำลังเรียกใช้ฟังก์ชันนั้นจริงๆ ส่วนหลังเป็นเพียงการอ้างอิงถึงฟังก์ชันนั้น แล้วเราจะใช้อันไหนเมื่อไร?

• คุณจะใช้ someFunction() เมื่อคุณต้องการให้เรียกใช้ฟังก์ชันนั้นและผลลัพธ์จะส่งคืนทันที ใน React โดยทั่วไปจะเห็นสิ่งนี้เมื่อคุณแบ่งส่วนของโค้ด JSX ออกเป็นฟังก์ชันแยกต่างหาก ทั้งด้วยเหตุผลของการอ่านหรือการนำกลับมาใช้ใหม่ ตัวอย่างเช่น:

  render() {
    myFunction() {
      return <p>Foo Bar</p>;
    }
    return (
      <div>
        {myFunction()}
      </div>
    );
  }
  

• คุณจะใช้ someFunction เมื่อคุณต้องการส่งต่อการอ้างอิงไปยังฟังก์ชันนั้นไปยังอย่างอื่นเท่านั้น ใน React โดยปกติจะเป็นตัวจัดการเหตุการณ์ที่ถูกส่งผ่านไปยังคอมโพเนนต์ลูกอื่นผ่าน props เพื่อให้คอมโพเนนต์นั้นสามารถเรียกตัวจัดการเหตุการณ์ได้เมื่อจำเป็น ตัวอย่างเช่น:

  class myApp extends React.Component {
    doSomething() {
      console.log("button clicked!");
    }
    render() {
      return (
        <div>
          <Button someFunction={this.doSomething} />
        </div>
      );
    }
  }
  
  class Button extends React.Component {
    render() {
      return (
        <button onClick={this.props.someFunction}>Click me</button>
      );
    }
  }
  

someFunction() vs this.someFunction()

สิ่งนี้เกี่ยวข้องกับบริบทของฟังก์ชัน โดยพื้นฐานแล้ว "ฟังก์ชันนี้อยู่ที่ไหน" เป็นส่วนหนึ่งของ Component ปัจจุบัน จากนั้นใช้ this.someFunction() เป็นส่วนหนึ่งของ Component หลักที่ส่งผ่านเป็นอุปกรณ์ประกอบฉากหรือไม่ จากนั้นใช้ this.props.someFunction() มันเป็นฟังก์ชันภายในเมธอดปัจจุบันหรือไม่ ให้ใช้ someFunction()

แน่นอนว่ายังมีอะไรมากกว่านั้นอีกมาก แต่เป็นบทสรุปพื้นฐานที่ดีที่สุดที่ฉันสามารถให้ได้

เพื่อความเข้าใจที่ดีขึ้น โปรดอ่านที่นี่ เป็นแนวทางที่ดีเกี่ยวกับวิธีการทำงานของคีย์เวิร์ด this ใน Javascript และใน React โดยเฉพาะ

หากคุณต้องการ เรียกใช้ ตัวเลือกฟังก์ชัน 2 และด้วยสมมติฐานบางประการ 5 ควรใช้งานได้

หากคุณต้องการ ส่งผ่าน ฟังก์ชั่นเป็นคุณสมบัติไปยังองค์ประกอบลูกบางส่วนเพื่อให้สามารถเรียกได้ในภายหลัง (พูดเพื่อแจ้งองค์ประกอบรูทของคุณในบางเหตุการณ์) ให้เลือกตัวเลือก 1 (พร้อม prebind) และ 3 ( ด้วยการกำหนดตัวแปร const {handleAddTodo} = this และ prebind :) ) ควรใช้งานได้

// this works if handleAddTodo was prebinded or doesn't use this
handleAddTodo ={this.handleAddTodo} 

// this probably wont work unless handleAddTodo is higher order function that returns another function
handleAddTodo ={this.handleAddTodo()} 

// This wont work unless you have a var/let/const that is referencing a function
handleAddTodo ={handleAddTodo} 

// Same as 1
handleAddTodo ={this.handleAddTodo} 

// 3 and 2 combined
handleAddTodo ={handleAddTodo()} 

ใน ES6 คุณสามารถใช้ฟังก์ชันปกติหรือฟังก์ชันลูกศร:

ฟังก์ชัน1 (ฟังก์ชันปกติ)

functionA(){
   //Something here
}

จากนั้นควรเรียก this.functionA()

ฟังก์ชัน2 (ฟังก์ชันลูกศร)

functionA = () => {
   //SomeThing Here
}

จากนั้นควรเรียก this.functionA

*Function3 (เช่น: ใน const ของ React) *

const A = (functionTest) =>{
  return (
     <div>{functionTest}</div>
    );
}

functionTest คือ mapStateToProps ใน React :)

ฉันหวังว่ามันจะเป็นประโยชน์สำหรับคุณ :)

สิ่งนี้ถูกต้อง -> handleAddTodo ={this.handleAddTodo} เมื่อฟังก์ชันส่งผ่านไปยังคอมโพเนนต์ลูก คุณต้องผูกฟังก์ชันของคุณเช่นนี้ handleAddTodo ={this.handleAddTodo.bind(this)} โค้ดด้านล่างช่วยคลายข้อสงสัยของคุณ

ตัวอย่างง่ายๆ

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated...'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

export default App;

กิจกรรมย่อย

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);
   };

   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }

   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}

class Content extends React.Component {

   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp.bind(this)}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}

export default App;

อ้างอิงที่นี่

คุณสามารถทริกเกอร์เหตุการณ์ด้วย this.props.someProps() ตรวจสอบตัวอย่างต่อไปนี้

import React, { Component } from 'react';    

class AddToDo extends Component {
   render() {
      return (
         <button onClick={ev => this.props.handleAddToDo(ev, 'hello')}>
            {this.props.title}
         </button>
      )
   }
}

class Todos extends Component {
   handleAddToDo(ev, someVal) {
      // do something
   }

   render() {
      return (
         <AddToDo title="Add" handleAddToDo={(ev, someVal) => this.handleAddToDo(ev, someVal)} />
      )
   }
}

export default Todos;

หากต้องการเรียกใช้ ฟังก์ชัน คุณต้องเพิ่ม ()

{this.handleAddTodo()}   

เกี่ยวกับการจัดการเหตุการณ์ - Handling#Events

ฟังก์ชันลูกศร - Functions#ArrowFunctions