ES6 хувилбарт бий болсон шинэ боломжуудыг судлах бэлтгэлийг Орчны тохиргоо хичээлээр үзсэн. Энэ хичээлээс ES6 хувилбарын шинэ боломжуудын талаар авч үзэж эхлэх ба хамгийн энгийн нь болох хувьсагчдад бий болсон шинэчлэлээс эхлэе.

const түлхүүр үг.

Javascript -ийн өмнөх хувилбаруудад хувьсагчийг var түлхүүр үгээр

var q = 1;
q = 2;
q = 'w';

үүсгээд цааш утгыг q = 2;, төрлийг q = 'w'; өөрчлөхөд ямар нэгэн асуудал үүсдэггүй. Гэвч Javascript -д утгыг нь солих боломжгүй тогтмол утга байдаггүй байсныг const түлхүүр үгээр зарлах боломжийг EcmaScript 6 -д бидэнд олгосон. Хэрвээ const түлхүүр үгээр

const MY_CONST = 1;
MY_CONST = 2; 

MY_CONST тогтмолыг зарлаад дараа нь түүний утгыг өөрчлөх гэвэл webstorm тогтмолд утга олгох оролдлого хийлээ гэсэн алдааг заана. index.js файлын компиляцийг хийх гээд үзье.

Өмнөх хичээлүүдэд бид хоёр хуудсыг үүсгээд тэдгээрт шилжих чиглүүлэгчийг (router) тохируулаад байгаа. Энэ удаад динамик чиглүүлэгчийг хэрхэн хэрэглэхийг авч үзье. Үүний тулд дараах тохиолдлыг авч үзье. Програмын Cars хуудаст машинуудын жагсаалтыг үзүүлэхээр болгон

<template>
  <div>
    <h1>Cars page</h1>
    <ul>
      <router-link 
        tag="li" 
        v-for="car in 5" 
        :to="'/car/' +car"
        :key=car 
      >
        <a>Car {{car}} </a>
      </router-link>
    </ul>
  </div>
</template>

гэж өөрчилье.

Төслийн App компонентийн кодыг харвал

class App extends Component {

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент'
  }

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

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle} />

        <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>
    )
  }
}

болсон байгаа.

Хичээлээр сорилгын үр дүнгийн хэсгийн боловсруулалтыг хийцгээе. Одоогоор сорилгын асуултууд дуусахад бид консолд Finished текстийг үзүүлж байгааг өөрчлөхийн тулд Quiz компонентод false анхдагч утгатай isFinished төлвийг

const [isFinished, setIsFinished] = useState(false)

нэмэн өгөөд onAnswerClickHandler аргаас сорилго дуусанг шалгах isQuizFinished функцээс true утга буцаавал Finished текстийг үзүүлж байсныг

        if (isQuizFinished()) {
          setIsFinished(true)
        } else {
          ...
        }

гэж өөрчилье. Өөрөөр хэлбэл сорилго дуусан isQuizFinished функцээс true утга буцаавал setIsFinished функцээр isFinished төлвийг true утгатай болгоно.