Хэрэв одоо Square(дөрвөлжин) дээр дарах юм бол хөтөч дээр чинь alert өгөх болно.
\n\n\nАнхаарах
\nБичиглэл бага байлгах болон
\nthis-ийн ойлгомжгүй байдлаас зайлс хийхийн тулд, event handler-таа энд болон цаашид arrow function бичиглэл-г ашиглалаа:\nclass Square extends React.Component {\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('click')}> {this.props.value}\n </button>\n );\n }\n}\n
onClick={() => alert('click')}-аар хэрхэнonClickprop-т функц дамжуулж байгааг анзаараарай. React энэ функцийг зөвхөн click хийсний дараа дуудна.() =>гэхээ мартажonClick={alert('click')}гэж бичих нь түгээмэл алдаа бөгөөд нь энэ нь компонентыг дахин үзүүлэх (render хийх) болгонд alert гаргадаг.
Дараагийн алхамд Square компонент биднийг click хийснийг “санаж” өөрийгөө “X” тэмдэглэгээгээр бөглөх ёстой. Ямарваа юмыг “санахын” тулд компонент state(төлөв байдал) ашигладаг.
\nReact компонентын байгуулагч(constructor)-т this.state-ийн утгыг оноосноор компонентыг state-тэй болгодог. this.state нь түүнийг тодорхойлсон React компонент дотор private байх учиртай. Одоо Square-ийн this.state дэх анхны утгыг тодорхойлоод түүнийг дараа нь Square-д click хийгдэх үед өөрчилье.
Эхлээд state-г үүсгэхийн тулд класст constructor(байгуулагч) нэмж өгье:
\nclass Square extends React.Component {\n constructor(props) { super(props); this.state = { value: null, }; }\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('click')}>\n {this.props.value}\n </button>\n );\n }\n}\n\nАнхаарах
\nJavaScript класст дэд(хүү) классын байгуулагчийг тодорхойлж байгаа үед заавал
\nsuperфункцийг дуудаж байх ёстой. Тиймээс бүхconstructor-тай React компонентуудын байгуулагч ньsuper(props)гэж эхэлж байх ёстой болно.
Одоо click хийх үед state-ийн утгыг харуулахын тулд Square-ийн render методыг өөрчилцгөөе:
- \n
<button>тааг доторхthis.props.value-гthis.state.value-ээр соль. \nonClick={...}эвент хандлерыгonClick={() => this.setState({value: 'X'})}-ээр соль. \nclassNameболонonClickprops-г тусдаа мөрөнд бичиж уншигдах байдлыг сайжруулъя. \n
Энэхүү өөрчлөлтийг хийсний дараа Square-ийн render методоос буцан ирж буй <button> тааг доорх байдлаар харагдана:
class Square extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: null,\n };\n }\n\n render() {\n return (\n <button\n className=\"square\" onClick={() => this.setState({value: 'X'})} >\n {this.state.value} </button>\n );\n }\n}Square-ийн render метод дотор onClick handler -с this.setState-г дуудсанаар React-д Square-ийн <button> click хийгдэх болгонд түүнийг дахин render хийхийг даалгаж байгаа юм. Шинэчлэгдсэний дараа Square-ийн this.state.value нь 'X' болох бөгөөд тиймээс тоглоомыг хөлөг дээр X-г үзүүлэх болно. Хэрэв ямар нэгэн Square дээр дарвал X гарч ирнэ.
Компонентын setState-г дуудах үед React тэрхүү компонент болон түүний доторх дэд компонентуудыг ч бас шинэчилнэ.
Яг одоо код ямар байгааг ийшээ орж хараарай
\nХөгжүүлэгчийн хэрэгсэл
\nChrome болон Firefox-т зориулсан хөгжүүлэгчийн хэрэгсэл React Devtools нэмэлтийг суулгаснаар хөтөчийнхөө хөгжүүлэгчийн хэрэгсэл хэсгээс React компонентын бүтцийг харж болдог.
\n\n \n \n \n \n![\"React](\"/static/41330fe61a925e2c3009be675bdb96a9/f2205/devtools.png\" "\\"\\"")
\n \n \n \n \n \nReact DevTools-ээр мөн React компонентын props болон state-г харж болно.
\nReact DevTools суулгасны дараа хуудасны дурын элемент дээр right-click хийн “Inspect” дээр даран хөгжүүлэгчийн хэрэгслийг нээх бөгөөд React тааб (“⚛️ Components” and “⚛️ Profiler”) хамгийн баруун талд гарч ирсэн байх болно. “⚛️ Components” ашиглан компонент мод бүтцийг шинжилж болно.
\nГэхдээ CodePen дээр үүнийг ажиллуулахын тулд нэмж хэдэн зүйл хийх хэрэгтэй:
\n- \n
- Нэвтэрч орох юм уу бүртгүүлээд и-мэйл хаягаа баталгаажуулах (спам-с сэргийлэхэд хэрэгтэй). \n
- “Fork” товч дээр дар. \n
- “Change View” дээр дараад “Debug mode”-г сонго. \n
- Одоо шинэ тааб нээх үед хөгжүүлэгчийн хэрэгсэл чинь React таабтай болсон байх ёстой. \n
Тоглоомоо дуусгая
\nОдоо бид tic-tac-toe тоглоомын суурийг өрчихсөн байгаа. Тоглоомыг дуусгахын тулд бид одоо “X” болон “O”-г сольж нүүдэг мөн ялагчийг тодорхойлдог болгох ёстой.
\nState-г дээш дамжуулах
\nОдоогоор Square компонент бүр тусдаа тоглоомын төлөв(state)-г хадгалж байна. Ялагчийг шалгаруулахын тулд 9 square бүрийн утгыг нэг цэгт удирдах хэрэгтэй.
\nЯахав Board нь Square бүрээс түүний state-ийн утгыг асууж болох юм гэж бодож байна уу. Хэдийгээр React дээр ингэж хийх боломжтой боловч ингэж хийснээр код нь ойлгоход хэцүү, алдаа гарах магадлалтай, засварлахад хүнд болох учраас тэгэхгүй байхыг зөвлөж байна. Түүний оронд хамгийн сайн хандлага бол тоглоомын state-г Square бүрт хадгалахын оронд эцэг Board компонент дээр хадгалах юм. Board компонент нь Square бүрт өмнө нь Square бүрт тоо дамжуулж байсан шиг юуг үзүүлэхийг prop-р дамжуулан хэлж болно.
\nОлон хүү компонентоос өгөгдөл цуглуулахын тулд эсвэл хоёр хүү компонент хоорондоо харилцахын тулд тэдний эцэг компонентод дундын state зарлах хэрэгтэй. Эцэг компонент нь state-г эргээд хүү компонентууд уруу props-р дамжуулах бөгөөд энэ нь хүү компонентуудыг бусад хүүнүүд болон эцэг компоненттой нэгэн зэрэг ажилладаг болгоно.
\nState-г дээш эцэг компонент уруу дамжуулах нь React компонентыг дахин шинэчлэх үед түгээмэл хийгддэг үйлдэл бөгөөд үүнийг өөрсдөө одоо хийж үзэцгээе.
\nBoard-д байгуулагч нэмээд Board-ийн state-ийн анхны утгыг 9 нүд бүрд харгалзан 9 null агуулах хүснэгт байдлаар онооё:
\nclass Board extends React.Component {\n constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; }\n renderSquare(i) {\n return <Square value={i} />;\n }Дараа нь бид хөлгийг харгалзах утгаар бөглөх үед this.state.squares хүснэгт нь доорх байдлаар болно:
[\n 'O', null, 'X',\n 'X', 'X', 'O',\n 'O', null, null,\n]Board-ийн renderSquare метод одоо ийм байдлаар харагдана:
renderSquare(i) {\n return <Square value={i} />;\n }Эхлээд бид Square бүрт 0-с 8 хүртэл тоо гаргахын тулд Board-с value prop-г доош дамжуулж өгсөн. Дараагийн алхамд бид Square-г өөрийн state-с хамаарч тоонуудыг “X” тэмдгээр сольдог болгосон. Тиймээс одоо Square нь Board-с дамжуулж өгч байгаа value prop-ийн утгыг ашиглахгүй байгаа.
Одоо бид prop дамжуулах механизмыг дахин ашиглах болно. Бид Board-г Square бүрт түүнийг одоогийн утгыг('X', 'O', эсвэл null) зааж өгдөг болгож өөрчилнө. Өмнө нь Board-ийн байгуулагчид squares array үүсгэсэн байгаа бөгөөд одоо Board-ийн renderSquare методыг тэр array-с утга авдаг болгож өөрчилнө:
renderSquare(i) {\n return <Square value={this.state.squares[i]} />; }Яг одоо код ямар байгааг ийшээ орж хараарай
\nОдоо Square бүр 'X', 'O', эсвэл хоосон нүдний хувьд null утгыг value prop-р авах болно.
Дараа нь бид Square дээр дарахад хийгдэх үйлдлийг солих ёстой. Одоо Board компонент аль нүд бөглөгдөж байхыг шийдэх учраас бидэнд Square нь Board-ийн state-г өөрчлөх арга зам хэрэгтэй болох юм. State нь түүнийг тодорхойлсон компонентын хувьд private тул Board-ийн state-г шууд Square-с өөрчилж чадахгүй.
\nТүүний оронд бид Board-с Square уруу функц дамжуулж өгөх бөгөөд Square дээр дарахад тэр функцийг Square дуудаж байх болно. Тиймээс Board-ийн renderSquare методыг доорх байдлаар өөрчилье:
renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)} />\n );\n }\n\nАнхаарах
\nБид уншихад тохиромжтойг нь бодож буцах элементийг олон мөрт хувааж бичсэн бөгөөд Javascript
\nreturn-ийн ард цэгтэй таслал (;) оруулж улмаар бидний кодыг эвдүүлэхээс сэргийлж хаалт нэмж өглөө.
Одоо Board-с Square уруу хоёр prop дамжуулж өгч байна: value болон onClick. onClick prop нь Square дээр дарахад дуудаж өгөх функц юм. Мөн доорх өөрчлөлтийг Square-т оруулна:
- \n
- Square-ийн
renderметод доторхthis.state.value-гthis.props.value-ээр солино. \n - Square’s
renderметод доторхthis.setState()-гthis.props.onClick()-ээр солино \n - Square нь state удирдахаа больсон тул Square-ийн байгуулагч
constructorфункцийг устгана. \n
Өөрчлөлтийн дараа Square компонент доорх байдлаар харагдана:
\nclass Square extends React.Component { render() { return (\n <button\n className=\"square\"\n onClick={() => this.props.onClick()} >\n {this.props.value} </button>\n );\n }\n}Square дээр дарахад Board-с дамжуулж өгч байгаа onClick функц дуудагдах бөгөөд хэрхэн энэ үйлдэл явагдахыг доорх байдлаар тайлбарлаж болно:
- \n
- Анхнаасаа байдаг DOM компонент
<button>-ийнonClickprop нь React-д click event-ийн listener-г бэлдэхийг даалгадаг. \n - button дарагдах үед React нь Square-ийн
render()метод дотор тодорхойлогдсонonClickevent handler-г дуудах болно. \n - Тэр event handler нь
this.props.onClick()-г дуудах бөгөөд энэ Square-ийнonClickprop-г Board тодорхойлж өгсөн байгаа. \n - Board нь Square уруу
onClick={() => this.handleClick(i)}гэж дамжуулсан учраас Square нь дарагдах үедээthis.handleClick(i)гэж дуудна. \n - Бид одоогоор
handleClick()методыг тодорхойлж өгөөгүй байгаа учраас хэрэв та square дээр дарвал кодонд асуудал үүсэж, “this.handleClick is not a function” (this.handleClick нь функц биш) гэсэн улаан алдааны мэдээлэл гарах болно. \n
\n\nАнхаарах
\nDOM
\n<button>компонент нь анхнаасаа байдаг цаанаасаа тодорхойлж өгсөн компонент учраасonClickатрибут нь React-ийн хувьд онцгой байдалтай юм. Харин Square зэрэг өөрийн хийсэн компонентын хувьд хэрхэн нэрлэхийг та өөрөө шийднэ. Бид Square-ийнonClickprop юм уу Board-ийнhandleClickметодыг дурын байдлаар нэрлэж болох бөгөөд тэгсэн ч код яг ижилхэн ажиллах болно. React-ийн хувьд event-г илэрхийлж байгаа prop-гon[Event], event-г боловсруулах методыгhandle[Event]гэж нэрлэх нь уламжлал болсон байдаг.
Бид одоогоор handleClick-г тодорхойлж өгөөгүй байгаа учраас Square-г дарах үед алдаа гарах болно. Одоо handleClick-г Board class-т нэмж өгье:
class Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n };\n }\n\n handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); }\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: X';\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Яг одоо код ямар байгааг ийшээ орж хараарай
\nЭнэхүү өөрчлөлтийн дараа бид өмнөхийн адил Square дээр дарах боломжтой болно. Гэхдээ state нь тус тусдаа Square нүднүүдэд биш Board-д хадгалагдаж байгаа. Board-ийн state өөрчлөгдөх үед Square компонентууд автоматаар дахин зурагдаж render хийгдэх болно. Бүх нүдний state-г Board компонентод хадгалснаар бид дараа нь ялагчийг тогтоох боломжтой болж байгаа юм.
\nSquare компонент state-г удирдахаа больсон учраас Square нь Board компонентоос утгаа авч, түүнийг дарах үед Board компонент уруу эргээд мэдээлж байна. React-д Square шиг компонентыг удирдагдсан компонент гэж хэлдэг. Board нь түүнийг одоо бүрэн удирдах болно.
\nБид handleClick функц дотор хэрхэн .slice() функцийг дуудаж squares array-ийн өмнөх хувилбарыг өөрчлөхгүйгээр шинээр хуулбар үүсгэж байгааг анхаараарай. Бид яагаад ийнхүү squares array-ийн хуулбарыг үүсгэж байгааг одоо тайлбарлая.
Хувиршгүй байдал(Immutability) яагаад чухал болох нь
\nӨмнөх жишээнд өөрчлөх ёстой squares array-ийн хуулбарыг .slice() оператор ашиглан үүсгэхийг билээ. Одоо бид хувиршгүй байдал гэж болох тухай болон яагаад хувиршгүй байдал чухал талаар ярих болно.
Ерөнхийдөө өгөгдлийг өөрчлөх хоёр хандлага байдаг. Эхнийх нь өгөгдлийн утгыг шууд өөрчлөх замаар өгөгдлийг хувиргах. Нөгөөх нь өгөгдлийг хүсэж байгаа өөрчлөлт хийгдсэн хуулбар өгөгдлөөр солих арга байна.
\nХувиргалтаар өгөгдлийг өөрчлөх
\nvar player = {score: 1, name: 'Jeff'};\nplayer.score = 2;\n// одоо player нь {score: 2, name: 'Jeff'} болноХувиргалтгүй өгөгдлийг өөрчлөх
\nvar player = {score: 1, name: 'Jeff'};\n\nvar newPlayer = Object.assign({}, player, {score: 2});\n// Одоо player нь өөрчлөгдөөгүй боловч newPlayer нь {score: 2, name: 'Jeff'} болно\n\n// Эсвэл объектыг тархаах бичиглэл ашиглавал доорхоор бичиж болно:\n// var newPlayer = {...player, score: 2};Эцсийн үр дүн ижил боловч шууд хувиргалтгүйгээр (эсвэл гол өгөгдлийг өөрчлөхгүйгээр) доор дурдсан давуу байдлыг олж болж байгаа юм.
\nТөвөгтэй шаардлагыг хялбарчлах
\nХувиршгүй байдал нь төвөгтэй шаардлагыг хийхэд энгийн болгож өгдөг. Энэхүү зааварчилгааны төгсгөлд tic-tac-toe тоглоомын түүхийг харж, өмнөх нүүдэл уруу “ухрах” боломжийг олгох “цаг хугацааны аялал”-н боломжийг хөгжүүлэх болно. Энэхүү үйлдэл нь зөвхөн тоглоом битгий хэл угаасаа л тодорхой үйлдлийг ухраах, урагшлуулах нь хэрэглээний програмын түгээмэл шаардлага билээ. Өгөгдлийг шууд өөрчлөхөөс зайлс хийх нь бидэнд тоглоомын түүхийн өмнөх хувилбаруудыг бүхлээр нь хадгалах мөн тэднийг дараа дахин ашиглах боломж олгоно.
\nӨөрчлөлтийг илрүүлэх
\nХувирахуйц(Mutable) объектын утгуудыг шууд хувиргаад явчихдаг учраас өөрчлөгдсөн эсэхийг илрүүлэх нь хүнд байдаг. Өөрчлөлтийг илрүүлэхийн тулд хувируйц объектийг өмнөх хувилбартай нь жиших хэрэгтэй болохоос гадна бүтэн объектын модоор нэг бүрчлэн орж шалгах хэрэгтэй болдог.
\nХарин хувиршгүй объектын өөрчлөлтийг илрүүлэх нь хамаагүй хялбар. Хувиршгүй объектын заалт нь өөрчлөгдсөн бол объект өөрчлөгдсөн гэсэн үг.
\nReact хэзээ дахин render хийхийг тодорхойлох
\nХувиршгүй байдлын гол давуу тал нь React-д pure components үүсгэхэд тусалдаг. Хувиршгүй өгөгдлийг өөрчлөгдсөн эсэхийг хялбар мэдэж болдог бөгөөд улмаар компонентыг хэзээ дахин зурахыг тодорхойлоход хялбар болгодог.
\nГүйцэтгэлийг оновчлох нь хэсгээс shouldComponentUpdate()-ийн талаар болон хэрхэн pure components хийхийг уншаарай.
Функцэн компонент
\nОдоо бид Square-г функцэн компонент болгон засах болно.
\nReact-д функцэн компонент нь өөрийн state-гүй зөвхөн render функцийг агуулдаг компонент бичих энгийн арга юм. React.Component-с удамшсан класс тодорхойлохын оронд зөвхөн props аваад юуг render хийхийг буцаадаг функц бичиж болдог. Функцэн компонент нь класс бичихээс ажил багатай бөгөөд олон төрлийн компонент энэ аргаар бичигдэж болдог.
Square классыг доорх функцээр сольё:
\nfunction Square(props) {\n return (\n <button className=\"square\" onClick={props.onClick}>\n {props.value}\n </button>\n );\n}this.props-г props болгож өөрчилсөн болно.
Яг одоо код ямар байгааг ийшээ орж хараарай
\n\n\nАнхаарах
\nSquare-г функцэн компонент болгон өөрчлөх үед
\nonClick={() => this.props.onClick()}-г илүү богинохонonClick={props.onClick}болгон мөн өөрчиллөө. (хоёр талд нь хаалтгүй болсон байгааг назгайраарай).
Ээлжлэх нь
\nОдоо бид тоглоом дээрээ “O” тэмдэглэгдэхгүй байгаа мэдээжийн алдааг засах болно.
\nБид эхний нүүдлийг “X” гэж тохируулах бөгөөд үүнийг Board-ийн байгуулагчид state-ийн анхны утга оноохдоо зааж өгөх болно:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }Тоглогч нүүх бүрд xIsNext (boolean) утга нь солигдож дараагийн удаа аль тоглогч нүүхийг тодорхойлох бөгөөд тоглоомын state-д хадгалагдана. Board-ийн handleClick функцийг засаж xIsNext-ийн утгыг сольдог өөрчлөлтийг хийе:
handleClick(i) {\n const squares = this.state.squares.slice();\n squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext, });\n }Одоо энэ өөрчлөлтөөр “X” болон “O”-ийн утга ээлжлэх юм. Оролдоод ч үзэж болно!
\nОдоо мөн Board-ийн render доторх “status” текстийг сольсноор дараагийн удаа аль тоглогч нүүхийг дэлгэц дээр харуулна:
render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n // the rest has not changedЭнэ бүгдийг хийсний дараа Board компонент маань ийм болж хувирна:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }\n\n handleClick(i) {\n const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); }\n\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Яг одоо код ямар байгааг ийшээ орж хараарай
\nЯлагчийг зарлах нь
\nОдоо бид дараагийн нүүдэл аль тоглогчийнх гэдгийг харуулж байгаа бөгөөд түүнээс гадна тоглоом хожилцсоныг эсвэл нүүх нүүдэл үлдээгүй гэдгийг мөн харуулах учиртай. Доорх туслах функцийг хуулаад файлынхаа хамгийн төгсгөлд буулгаарай:
\nfunction calculateWinner(squares) {\n const lines = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [0, 3, 6],\n [1, 4, 7],\n [2, 5, 8],\n [0, 4, 8],\n [2, 4, 6],\n ];\n for (let i = 0; i < lines.length; i++) {\n const [a, b, c] = lines[i];\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\n return squares[a];\n }\n }\n return null;\n}9 нүдтэй array-ийн хувьд энэ функц нь ялагчийг шалгаж аль тохиромжтой 'X', 'O', эсвэл null утгыг буцаадаг.
Бид аль нэг тоглогч хожсон эсэхийг шалгахдаа Board-ийн render функц дотор calculateWinner(squares)-г дуудах болно. Хэрэв аль нэг нь хожвол бид “Winner: X” эсвэл “Winner: O” гэсэн текст үзүүлэх юм. Board-ийн render функц доторх status-ийн зарлалтыг доорх кодоор сольё:
render() {\n const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n // the rest has not changedОдоо Board-ийн handleClick функцийг хэрэв аль нэг тоглогч хожсон юм уу тухайн нүд нь аль хэдийн дарагдсан байвал дахиж дарахад хариу үйлдэл үзүүлэхгүй шууд return хийдэг болгож засъя:
handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }Яг одоо код ямар байгааг ийшээ орж хараарай
\nБаяр хүргэе! Одоо чи ажилладаг tic-tac-toe хийж чадлаа. Мөн чи React-ийн үндсийг сурсан. Тиймээс энэ тоглоомонд чи жинхэнэ ялагч боллоо.
\nЦаг хугацааны аялал нэмэх нь
\nСүүлийн дасгал болгож бүгдээрээ тоглоомын өмнөх нүүдлүүд уруу “цаг хугацааг ухраах” боломжийг бүрдүүлцгээе.
\nНүүдлүүдийн түүхийг хадгалах нь
\nХэрэв бид squares array-г хувиргах(mutate) юм бол цаг хугацааны аялал хийх нь үнэхээр хэцүү болох болно.
Гэхдээ бид slice() функц ашиглан squares array-ийн хуулбарыг нүүдэл бүрийн дараа үүсгэж байгаа бөгөөд хувиршгүй гэж тооцсон байгаа. Энэ нь бидэнд squares array-ийн өмнөх хувилбар бүрийг хадгалах, өмнө болсон нүүдэл бүрийн хооронд явах боломжийг олгоно.
Хуучин squares array-г өөр history гэсэн array-д хадгалъя. history нь эхний нүүдлээс эцсийн нүүдэл хүртэлх Board-ийн бүх state-г хадгалах бөгөөд доорх байдлаар харагдана:
history = [\n // Before first move\n {\n squares: [\n null, null, null,\n null, null, null,\n null, null, null,\n ]\n },\n // After first move\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, null,\n ]\n },\n // After second move\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, 'O',\n ]\n },\n // ...\n]Одоо бид аль компонент history state-г өөртөө агуулахыг шийдэх хэрэгтэй.
Дахиад State-г дээш дамжуулах нь
\nБид нар дээд талын Game компонент өнгөрсөн нүүдлийн жагсаалтыг харуулахыг хүсэж байгаа. Тэгэхийн тулд энэ компонент history уруу хандах хэрэгтэй бөгөөд тиймээс history state-г дээд талын Game компонентод байрлуулъя.
history state-г Game компонентод байрлуулах нь биднийг squares state-г түүнийг хүү Board компонентоос устгах нөхцөл бүрдүүлнэ. Яг өмнө нь Square компонентоос Board компонент уруу “state дээш дамжуулж ” байсан шиг бид одоо Board компонентоос дээд талын Game компонент уруу дээш дамжуулах болно. Ингэснээр Game компонент нь Board-ийн өгөгдлийг бүрэн удирдах бөгөөд history-с өмнөх нүүдлийг авч Board-р үзүүлэх боломжтой болгох юм.
Эхлээд Game компонентын state-г түүний байгуулагч дотор үүсгэе:
\nclass Game extends React.Component {\n constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], xIsNext: true, }; }\n render() {\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board />\n </div>\n <div className=\"game-info\">\n <div>{/* status */}</div>\n <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }\n}Дараа нь Board компонентыг squares болон onClick props-г Game компонентоос авдаг болгоё. Board компонентод бүх Square-т зориулж ганц л click handler байгаа учраас бид аль Square дарагдсаныг мэдэгдэхийн тулд Square тус бүрийн байрлалыг onClick handler уруу дамжуулах ёстой. Тиймд Board компонентод дараах өөрчлөлтийг хийх хэрэгтэй болно:
- \n
- Board доторх
constructor-г устгана. \n - Board-ийн
renderSquareдоторхthis.state.squares[i]-гthis.props.squares[i]-ээр солино. \n - Board-ийн
renderSquareдоторхthis.handleClick(i)-гthis.props.onClick(i)-ээр солино. \n
Board компонент одоо доорх байдалтай болно:
\nclass Board extends React.Component {\n handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }\n\n renderSquare(i) {\n return (\n <Square\n value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />\n );\n }\n\n render() {\n const winner = calculateWinner(this.state.squares);\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Тоглоомын төлөвийг тодорхойлох улмаар үзүүлэхэд хамгийн сүүлийн history бүртгэлийг ашиглах гэж Game компонентын render функцийг доорх байдлаар засъя:
render() {\n const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div>\n <div className=\"game-info\">\n <div>{status}</div> <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }Game компонент нь одоо тоглоомын төлөвийг үзүүлж байгаа учир бид Board компонентын render методоос харгалзах кодыг устгаж болно. Тэгсний дараа Board-ийн render функц ийм байдалтай болно:
render() { return ( <div> <div className=\"board-row\"> {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }Эцэст нь handleClick методыг Board компонентоос Game компонент уруу зөөх хэрэгтэй. Game компонентын state нь өөр бүтэцтэй тул бид handleClick-г бага зэрэг засах хэрэгтэй болно. Game-ийн handleClick метод дотор бид шинэ history бүртгэлийг history уруу залгаж(concat) өгье.
handleClick(i) {\n const history = this.state.history; const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{ squares: squares, }]), xIsNext: !this.state.xIsNext,\n });\n }\n\nАнхаарах
\nБидний илүү танил array
\npush()методоос ялгаатай ньconcat()метод нь үндсэн array-г хувиргадаггүй учраас бид үүнийг ашигласан шүү.
Board компонентод одоо зөвхөн renderSquare болон render методууд л хэрэг болно. Тоглоомын төлөв байдал болон handleClick метод нь Game компонентод байвал илүү тохиромжтой.
Яг одоо код ямар байгааг ийшээ орж хараарай
\nХуучин нүүдлүүдийг харуулах нь
\ntic-tac-toe тоглоомын түүхийг тэмдэглэж авч байгаа учраас бид тоглогчдод түүнийг хуучин нүүдлийн жагсаалт байдлаар харуулах боломжтой.
\nБид өмнө нь React элементүүдийг first-class JavaScript objects учраас тэдгээрийг аппликейшн дотроо дамжуулж болно гэдийг мэдэж авсан. React-д олон юм render хийхийн тулд React элементийн array ашиглаж болдог.
\nJavaScript-т array нь өгөгдлийг нь өөр өгөгдөлд map(буулгалт) хийдэг map() методтой:
const numbers = [1, 2, 3];\nconst doubled = numbers.map(x => x * 2); // [2, 4, 6]map методыг ашиглаад нүүдлүүдийн түүхийг тус бүр нь дэлгэц дээр button гаргах React элементүүд уруу буулгалт хийж хуучин нүүдэл уруу буцах button-ийн жагсаалт үзүүлье.
Game-ийн render метод дахьhistory-г map хийвэл:
render() {\n const history = this.state.history;\n const current = history[history.length - 1];\n const winner = calculateWinner(current.squares);\n\n const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return ( <li> <button onClick={() => this.jumpTo(move)}>{desc}</button> </li> ); });\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board\n squares={current.squares}\n onClick={(i) => this.handleClick(i)}\n />\n </div>\n <div className=\"game-info\">\n <div>{status}</div>\n <ol>{moves}</ol> </div>\n </div>\n );\n }Яг одоо код ямар байгааг ийшээ орж хараарай
\ntic-tac-toe-ийн өмнө гарсан нүүдэл бүрд <button> элемент агуулах жагсаалтын <li> элемент үүсгэлээ. Товч бүрт нь this.jumpTo() методыг дууддаг onClick handler бичиж өгсөн. Одоогоор jumpTo() методыг хөгжүүлж өгөөгүй байгаа болно. Одоо тоглоомын туршид болсон бүх нүүдлийн жагсаалт дэлгэц дээр харагдаад харин developer tools console дээр доорх анхааруулга гарсан байх ёстой.
\n\nWarning:\nEach child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.
\n
\n\nАнхааруулга:\narray юм уу iterator-ийн бүх хүү нь давхардахгүй “key” prop-той байх хэрэгтэй. “Game”-ийн render методыг шалгана уу.
\n
Одоо дээрх анхааруулга ямар утгатайг тайлбарлая.
\nKey-г сонгох нь
\nЯмар нэгэн жагсаалт(list) render хийхдээ React жагсаалтын нэгж(item) бүрийн тухай зарим мэдээллийг хадгалж авдаг. Тэгээд жагсаалт шинэчлэгдэх үед React юу өөрчлөгдсөн гэдгийг тодорхойлох ёстой. Бид нар жагсаалтын нэгжийг шинээр нэмж, устгаж, дахин эрэмбэлж эсвэл шинэчилж болох л юм.
\nГэхдээ доорхыг
\n<li>Alexa: 7 tasks left</li>\n<li>Ben: 5 tasks left</li>ийм болгож
\n<li>Ben: 9 tasks left</li>\n<li>Claudia: 8 tasks left</li>\n<li>Alexa: 5 tasks left</li>өөрчилж байна гэж бодоод үздээ.
\nҮүнийг харсан хүн тоог шинэчлэхээс гадна Alexa болон Ben хоёрын байрлалыг солиод Claudia-г дундуур нь хийсэн байна гэж хэлж болох байх. Гэхдээ React нь компьютерын програм учраас биднийг зорилгыг тааж мэдэхгүй, тиймд бид жагсаалтын нэгж бүрийг түүний хүүгээс ялгаруулахын тулд жагсаалтын нэгж бүрд key property-г тодорхойлж өгөх хэрэгтэй. Нэг сонголт нь alexa, ben, claudia string-үүдийг ашиглах юм. Хэрэв өгөгдлөө сангаас татаж харуулж байгаа бол Alexa, Ben, болон Claudia-н өгөгдлийн сан дахь ID-г key-р ашиглаж болно.
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>Одоо жагсаалтыг дахин render хийх үед React жагсаалтын нэгж бүрийн key-г авч өмнөх жагсаалтын нэгжээс key нь таарч байгааг хайна. Хэрэв одоогийн жагсаалт нь өмнө нь байгаагүй key-г агуулж байвал React тухайн харгалзах компонентыг үүсгэнэ. Хэрэв одоогийн жагсаалт өмнө байсан key-г агуулаагүй бол харгалзах компонентыг устгах болно. Хэрэв хоёр key давхцаж байгаа бол харгалзах компонентыг байх ёстой байрлалд нь зөөнө. Key нь React-н компонентыг таних тэмдэг бөгөөд тэр нь React-д дахин render хийх хооронд state-г зохицуулах боломж олгодог. Хэрэв компонентын key өөрчлөгдөх юм бол тэр компонент устгаад шинэ state-тай дахин шинээр үүсэх болно.
\nkey нь React-ийн тусгай, хадгалсан property юм. (мөн ref адил бөгөөд илүү дээд түвшины хэрэглээнд ашиглагддаг.). Элементийг үүсгэх үед key property-г ялгаж аваад шууд буцаж байгаа элементэд хадгалдаг. Хэдийгээр key нь props-т харьяалагдаж байгаа мэт боловч key-г this.props.key-р авч болохгүй. React нь автоматаар аль компонентыг шинэчлэхийг шийдэхэд key-г ашигладаг. Компонент нь өөрийнхөө key-г асуух боломжгүй байдаг.
Аливаа өөрчлөгдөх жагсаалт үүсгэхдээ зөв зүйтэй key оноож өгөх нь маш чухал байдгийг байнга санах хэрэгтэй. Хэрэв тохиромжтой key байхгүй байвал өгөгдлөө дахин зохион байгуулж key-тэй болгосон нь дээр.
\nХэрэв key оноож өгөөгүй бол React анхааруулга гаргаад array-ийн index-г key-ээр ашигладаг. Харин array-ийн index-г key-аар ашиглах нь жагсаалтын нэгжүүдийн байрлалыг өөрчлөх, дундаас нь устгах, дунд нь шинээр оруулах зэргийг хийх үед асуудал үүсгэдэг. key={i} гэж дамжуулах нь анхааруулгыг гаргахгүй болгох боловч array-ийн index ашигласантай ижил асуудал үүсгэх бөгөөд тэгэхгүй байхыг зөвлөж байна.
Key нь бүх програмын хувьд давхардахгүй байх албагүй зөвхөн компонент дотор жагсаалтын нэгж компонент нь болон түүний хөрш компонентын хувьд л давхардахгүй байх ёстой.
\nЦаг хугацааны аялалыг хэрэгжүүлэх нь
\ntic-tac-toe тоглоомын түүхийн хувьд өнгөрсөн бүх нүүдэл нь түүний нүүдлийн дарааллын дугаар болох давхардаагүй ID-тай. Нүүдлүүдийг хэзээ ч байрлалыг нь өөрчилж, устгаж эсвэл дундуур нь шинийг оруулахгүй учраас нүүдлийн дугаарыг key-ээр ашиглахад асуудал байхгүй.
\nGame компонентын render метод дотор method, <li key={move}> гэж key-г нэмэхэд React-ийн анхааруулга арилах болно:
const moves = history.map((step, move) => {\n const desc = move ?\n 'Go to move #' + move :\n 'Go to game start';\n return (\n <li key={move}> <button onClick={() => this.jumpTo(move)}>{desc}</button>\n </li>\n );\n });Яг одоо код ямар байгааг ийшээ орж хараарай
\njumpTo методыг тодорхойлоогүй байгаа учраас жагсаалтын аль ч хэсэгт дарсан алдаа гарах болно. jumpTo методыг хөгжүүлэхээс өмнө Game компонентод бид аль нүүдлийг одоо үзэж байгааг тодорхойлох stepNumber state-г нэмж өгье.
Эхлээд stepNumber: 0-г Game компонентын байгуулагч constructor-н дотор анхны state-д нэмж өгье:
class Game extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n history: [{\n squares: Array(9).fill(null),\n }],\n stepNumber: 0, xIsNext: true,\n };\n }Дараа нь Game компонентод stepNumber-г шинэчилж байх jumpTo методыг зарлаж өгнө. Мөн хэрэв stepNumber-г өөрчилж байгаа тоо нь тэгш бол xIsNext-г true болгож утга оноох ёстой:
handleClick(i) {\n // this method has not changed\n }\n\n jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0, }); }\n render() {\n // this method has not changed\n }Одоо Game-ийн нүднүүд дээр дарахад ажиллах handleClick методод зарим өөрчлөлт хийе.
Одоо бидний нэмсэн stepNumber state нь хэрэглэгчид үзүүлж байгаа нүүдлийн утгаас хамаарч өөрчлөгдөнө. Бид дараагийн нүүдлийг хийх үед stepNumber-ийн утгыг this.setState-ийн аргумент болгож stepNumber: history.length гэх байдлаар шинэчлэх хэрэгтэй. Энэ нь шинэ нүүдэл хийгдсэний дараа бидэнд ижил нүүдэл харагдуулаад байхгүй гэсэн баталгааг өгч байгаа юм.
Бид мөн this.state.history-г this.state.history.slice(0, this.state.stepNumber + 1)-ээр солих болно. Энэ нь хэрэв бид өнгөрсөн нүүдэл уруу очоод тэр цэгээс эхлэн дахин шинээр нүүдэл хийвэл одоо хэрэггүй болсон дараагийн нүүдлүүдийг байхгүй болгох юм.
handleClick(i) {\n const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1];\n const squares = current.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{\n squares: squares\n }]),\n stepNumber: history.length, xIsNext: !this.state.xIsNext,\n });\n }Эцэст нь Game компонентын render методыг байнга сүүлийн нүүдлийг render хийхийг болиулж stepNumber-ийн дагуу сонгогдсон нүүдлийг render хийдэг болгож өөрчилнө:
render() {\n const history = this.state.history;\n const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares);\n\n // the rest has not changedОдоо хэрэв тоглоомын өмнөх түүх дээр дарах юм бол tic-tac-toe-ийн хөлөг нь тухайн нүүдэл хийгдсэний дараа хөлөг ямар харагдаж байсан тийм харагдахаар даруй өөрчлөгдөнө.
\nЯг одоо код ямар байгааг ийшээ орж хараарай
\nДүгнэж үзье
\nБаяр хүргэе! Та доорх үйлдлийг хийдэг tic-tac-toe тоглоом хийж чадлаа:
\n- \n
- tic-tac-toe тоглоом тоглох боломжтой, \n
- Тоглогч хожилцвол түүнийг тодорхойлдог, \n
- Тоглоом явагдахад түүний түүхийг хадгалдаг, \n
- Тоглогч нар тоглоомын түүхийг харж, тоглоомын хөлөгийн өмнөх хувилбаруудыг үзэж болдог. \n
Одоо таныг React хэрхэн ажилладаг талаар сайн ойлголттой болсон гэж итгэж байна.
\nЭцсийн үр дүнг дараах хуудаснаас үзээрэй: Эцсийн үр дүн.
\nХэрэв танд шинээр сурсан React чадвараа дадлагажуулах цаг, сонирхол байвал tic-tac-toe тоглоомондоо хийж болох дараах сайжруулалтын санааг хэрэгжүүлээд үзээрэй. Эдгээрийг хүндрэлийнх түвшингээр нь жагсаасан болно:
\n- \n
- Нүүдлийн түүхийн жагсаалтад (багана, мөр) хэлбэрээр нүүдэл бүрийн байрлалыг харуулах. \n
- Нүүдлийн жагсаалтад одоо сонгогдсон хэсгийг тодруулах. \n
- Board-ийн нүднүүдийг нэг бүрчлэн кодчилохын оронд хоёр давхар давталтаар хэвлэх. \n
- Нүүдлийн жагсаалтыг өсөх эсвэл буурах эрэмбээр жагсаадаг товчлуур нэмэх. \n
- Хэрэв хэн нэгэн хожвол хожлыг илтгэсэн 3 нүдийг тодруулдаг болгох. \n
- Хэрэв аль нь ч хожоогүй бол гарч ирсэн үр дүнг гаргасан мэдээлэл үзүүлэх. \n
Энэхүү зааварчилгааны турш бид элемент, компонент, props болон state гэсэн React-ийн ухагдахуунуудтай ашиглалаа. Эдгээр сэдвүүдийн талаар илүү дэлгэрэнгүй тайлбарыг гарын авлагын бусад хэсгээс үзээрэй. Компонент тодорхойлох талаар илүү сурахыг хүсвэл React.Component API reference-г үзээрэй.