ErrorBoundary

react 16 гаас дээш хувилбарт бий болсон кодод үүссэн алдаануудыг илүү эвтэйхэн боловсруулахад зориулагдсан ErrorBoundary амьдралын шинэ циклийн талаар судлая. ErrorBoundary аргыг туршихын тулд төслийн src хавтас ErrorBoundary хавтаст үүсгээд

import React from 'react'

export default class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
    }
    return this.props.children
  }
}

код бүхий шинэ ErrorBoundary компонентийг үүсгэе.

Материалыг тусгай эрхтэй хэрэглэгч үзнэ.

request_quoteТусгай эрх авах

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

Холбоотой материалууд
Аргад параметрүүд дамжуулах

  Нээгдсэн тоо: 1515 Төлбөртэй

Хичээлээр үйл явцын талаар дэлгэрүүлэн авч үзье. Үүний тулд Үйл явдал нэмэх хичээлийн кодыг нэг тоолууртай түүнийг нэмэгдүүлэх нэг товчтой болгон

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button v-on:click="addCounter">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    addCounter: function() {
                        this.counter++
                    }
                }
            })
        </script>
    </body>

өөрчилсөн. Хөтөч дээр хуудсаа нээгээд Нэмэгдүүлэх товчийг дарвал тоолуурын утга нэгээр нэмэгдэж байгаа эсэхийг шалган үзээрэй.

Set , WeakSet обьектууд

  Нээгдсэн тоо: 1227 Төлбөртэй

ES6 -д өгөгдлүүдийг олонлог байдлаар хадгалан тэдгээртэй ажиллах Set , WeakSet обьектууд бий болсон. Хичээлээр энэхүү шинэчлэлүүдийн тухай үзье.

Set обьект

Set өөртөө төрөл бүрийн утгуудыг агуулан тэдгээртэй ажиллагааг хөнгөн болгох массив төрлийн тусгай бүтэц буюу обьект юм. Гэхдээ Set -д зөвхөн давтагдахгүй утгуудыг хадгалж болдог. Ингээд Set гэж юу болох түүнтэй хэрхэн ажиллахыг дараах

let set = new Set();
set.add(10);
set.add('Hello');
set.add({});

console.log(set);
console.log(set.size);

энгийн жишээгээр харцгаая.

Директивийн тэмдэглэгээ

  Нээгдсэн тоо: 1341 Төлбөртэй

VueJs фреймворкийн үндсэн ухагдхууныг танилцуулах ээлжит хичээлээр директивүүдийн тэмдэглэгээний талаар авч үзье. VueJs -ийн тодорхой директивүүдтэй илүү эвтэйхэн ажиллах боломжийг доорх код бүхий хуудас дээр харцгаая.

    <body>
        <div id="app">
            <h2>
                <a v-bind:href="url">E-surgalt</a>
            </h2>
            <h2>
                Тоолуур = {{ counter }}
            </h2>

            <button v-on:click="counter++">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:',
                    counter: 0
                }
            })
        </script>
    </body>
Динамик жагсаалт

  Нээгдсэн тоо: 453 Төлбөртэй

Динамик жагсаалттай ажиллах боломжуудын тухай авч үзье. Манай хичээлийн програм App, Car компонентуудтай болоод байгаа.

App компонентийн Toogle car товч машиний мэдээллийн жагсаалтыг нээх, хаах ажиллагааг хийх бол Car компонентийн Дарах товчоор App компонентод h1 гарчигаар үзүүлж буй текстийг машиний нэрээр сольдог. Динамик жагсаалттай ажиллах практик болгон програмд Car компонентийн Дарах товчийг input -ээр солиод input -д оруулсан мэдээллээр Car компонентоос машиний нэрийг өөрчлөх машиний мэдээллийг жагсаалтаас хасах ажиллагаануудыг хэрэгжүүлье.

Үйл явдал…

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 220

 
Холбоосын параметрүүд

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 303

 
Зочин (Visitor)

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 261

 
Лямбда

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 365

 
Outlet компонент

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 412

 
Хадгалагч (Memento)

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

…

Нээгдсэн тоо : 435

 
Нэргүй арга

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 499

 
Урвуу матриц

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 579

 
Кодийн сайжруулалт

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 600

 
Энэ долоо хоногт
Бодлого 8.031

Өдрийн хуваарьт 5 хичээл ордог. Тэгвэл 11 хичээлээс зохиож болох хуваарийн хувилбарын тоог ол. Нэг хичээл өдөрт нэг удаа л орно.

Нээгдсэн тоо : 1946

 
Бодлого 16.042

y=8x3 ба y=8x функцуудын графикаар хязгаарлагдсан дүрсийн талбайг ол.

Нээгдсэн тоо : 1063

 
Бодлого 3.099

тэгшитгэлийн язгуурууд x1 , x2 , x3 бол

Нээгдсэн тоо : 692

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195