React -д үйл явцыг хэрхэн боловсруулах талаар гүнзгийрүүлэн судлая. Үүний тулд Car компонентийн кодод Дарах нэртэй товчийг

import React from 'react'

const car = props => <div>
  <h3>Машиний нэр: {props.name}</h3>
  <p>Он: <strong>{props.year}</strong></p>
  <button>Дарах</button>
</div>

export default car

нэмэн өгөөд хуудсаа харвал

гэж харагдана.

Зөвлөмж: Хичээлийн материалыг бүрэн ойлгохын тулд React JS сан хичээлийн багцыг бүхэлд нь үзэхийг зөвлөе.

Car компонентод Дарах нэртэй товч нэмэгдсэн хэдий ч ямарч үйл явцыг мэдрэхгүй. Тэгвэл Car компонентийн Дарах товчийг дарахад App компонент h1 гарчигаар үзүүлж байгаа текстийг өөрчлөх ажиллагааг оруулан ирье. Car компонент App компонентоос дуудагдахын дээр солих гэж буй pageTitle талбар App компонентод state обьектод байгаа нь үндсэн асуудал. Эхлээд хүүхэд компонентод үйл явцын боловсруулагчийг /функц/ хэрхэн дамжуулахыг App компонентийн render аргын

  render() {
    console.log('Render')
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <button onClick={this.changeTitleHandler}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
        />
      </div>
    )

кодоос харцгаая. Ердийн html элементийн хувьд үйл явцын боловсруулагчийг тавин өгөхийг Гарчиг өөрчлөх товч дээр үзүүлсэн. Харин react компонентийн хувьд өгөгдлийн загвар нь html элементийнхээс өөр тул энэ арга ажиллахгүй. App компонентийн Гарчиг өөрчлөх товчны боловсруулагч changeTitleHandler функцийг Car компонентод параметрээр дамжуулахдаа түүнийг ердийн функц шиг л дамжуулдаг. Параметрийн нэрийг үйл явцын нэртэй зохицуулан ямраар ч өгөх боломжтой. Кодод товчны даралтаар хийгдэх ажиллагаатай холбон onChangeTitle нэрийг өгсөн. Параметрийн утгаар өмнөхтэй ижил changeTitleHandler функцийн холбоосыг өгнө. Одоо дамжуулсан параметрт Car компонентод

const car = props => <div>
  <h3>Машиний нэр: {props.name}</h3>
  <p>Он: <strong>{props.year}</strong></p>
  <button onClick={props.onChangeTitle}>Дарах</button>
</div>

гэж хандана. Хүүхэд компонентийн үйл явцын сонсогч тавих элементэд Jsx атрибутын нэрээ өгөөд props -оор дамжин функцийн холбоосыг агуулсан ирсэн параметрийг өгөхөд л хангалттай. Ингэснээр react тухайн холбоосоор App компонентийн changeTitleHandler функцийг ажиллуулах юм. Өөрчлөлтийг хадгалаад хуудсаа нээгээд Гарчиг өөрчлөх, эхний машиний Дарах товчууд дээр дарвал

h1 гарчигаар үзүүлж байгаа текст өөрчлөгдөх болно. Дараагийн хоёр машиний Дарах товчууд үйл явцыг мэдрэхгүйн дээр h1 гарчигаар үзүүлж байгаа текстийн өөрчлөлтийг код дотор шууд нэмэх байдлаар хийсэн болохоор товч дарагдах бүрд гарчигт нэг ижил текстийг нэмсээр байгаа. Үүнийг арай илүү практик утгатай болгоё. Өөрөөр хэлбэл changeTitleHandler функцэд өөрчлөлт хаанаас хийгдэж байгаа параметрээр дамжуулан илүү ойлгомжтой болгох юм. changeTitleHandler функцийн хувьд

  changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
  }

гэхэд л болно. changeTitleHandler функц параметр аваад түүгээр pageTitle төлвийг өөрчилнө. changeTitleHandler функцэд параметрийг хэрхэн дамжуулах вэ? Үүнийг хэрэгжүүлэх хоёр аргыг App компонентийн render аргын

  render() {
    console.log('Render')
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
          onChangeTitle={() => this.changeTitleHandler(cars[1].name)}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
          onChangeTitle={() => this.changeTitleHandler(cars[2].name)}
        />
      </div>
    )
  }

кодоос харцгаая. Эхнийх нь javascript функцэд байдаг bind аргыг ашиглах. bind арга шинэ функц буцаахаас түүнийг дуудаггүй тул параметр дамжуулах сайн арга. bind арга эхний параметрээр ажлуулахгүйгээр буцаах функцийг /context -ээр/ авдаг. Кодод өгсөн this бол changeTitleHandler функцийг зааж байгаа хэрэг. Дараа нь аргаас буцаагдах функцэд дамжуулах параметрүүдийг өгдөг. Энд App өөрчлөлт текстийг өгсөн. Ингэснээр Гарчиг өөрчлөх товч дээр дарахад changeTitleHandler функцийг App өөрчлөлт параметртэй дуудах функцийн холбоос үүсэх юм. Энэ аргаар эхний машиний Дарах товчны үйл явцыг боловсруулагч функцэд машиний нэрийг параметрээр дамжуулсан. Сүүлийн хоёр машиний Дарах товчны үйл явцыг боловсруулагчийг bind аргаар биш функцийн холбоос байдлаар дамжуулсан. Параметрийн утгаар сумаар тодорхойлогдох функцийг зарлаад түүн дотроос changeTitleHandler функцэд машиний нэрийг параметрээр өгөн дуудахыг заасан. Өөрчлөлтийг хадгалаад хуудсаа нээгээд Гарчиг өөрчлөх болон машинуудын Дарах товчууд дээр дарвал үйл явцын боловсруулагчид хаанаас дарагдсанг илтгэх параметрүүд очих тул h1 гарчигаар үзүүлж байгаа текстээс үйл явц хаана бий болсонг мэдэх боломжтой болсон нь харагдана.
Боловсруулагч функцэд параметр дамжуулж байгаа хоёр аргын алийг ч ашиглах боломжтой ч bind арга хөтөчөөс бага нөөцийг ашигладаг тул арай зөв хэлбэр юм. Хоёрдахь аргын хувьд хуудас зурагдах бүрд функцийг дуудах шинэ функцийг үүсгэх болно. Програм жижигхэн байхад энэ нь нэг их нөлөөгүй ч аргыг олон хэрэглэвэл програмийн бүтээмжид айхтар биш ч нөлөөлөх талтай.