React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in deklaratif bir yakla\u015f\u0131m sunar. Bile\u015fenlerin durumu (state) ve \u00f6zellikler (props) arac\u0131l\u0131\u011f\u0131yla veri ak\u0131\u015f\u0131n\u0131 y\u00f6neterek kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc tan\u0131mlar\u0131z. Ancak, bazen React’in deklaratif do\u011fas\u0131n\u0131n d\u0131\u015f\u0131na \u00e7\u0131kmam\u0131z ve do\u011frudan DOM elementleriyle veya bir bile\u015fenin \u00f6rne\u011fiyle etkile\u015fime ge\u00e7memiz gerekebilir. \u0130\u015fte tam bu noktada “Refler” (Refs) devreye girer. Refler, React bile\u015fenleri i\u00e7inde belirli bir DOM elementine veya bir s\u0131n\u0131f bile\u015feninin \u00f6rne\u011fine do\u011frudan referans almam\u0131z\u0131 sa\u011flayan bir “ka\u00e7\u0131\u015f kap\u0131s\u0131” (escape hatch) g\u00f6revi g\u00f6r\u00fcr.<\/p>\n
Bu k\u0131lavuzda, React’te ref kavram\u0131n\u0131 derinlemesine inceleyecek, farkl\u0131 ref t\u00fcrlerini, kullan\u0131m senaryolar\u0131n\u0131, en iyi pratikleri ve ka\u00e7\u0131n\u0131lmas\u0131 gereken yayg\u0131n hatalar\u0131 ele alaca\u011f\u0131z. Amac\u0131m\u0131z, ref’leri ne zaman ve nas\u0131l etkili bir \u015fekilde kullanaca\u011f\u0131n\u0131z\u0131 anlaman\u0131za yard\u0131mc\u0131 olmakt\u0131r.<\/p>\n
React’in temel felsefesi, UI’\u0131 uygulaman\u0131n durumunun bir fonksiyonu olarak g\u00f6rmektir. Yani, Ancak, baz\u0131 durumlar vard\u0131r ki React’in veri ak\u0131\u015f\u0131 modeli, ihtiyac\u0131m\u0131z olan kontrol\u00fc sa\u011flamaz. Bu durumlar genellikle a\u015fa\u011f\u0131daki kategorilere ayr\u0131l\u0131r:<\/p>\n Refler, bu t\u00fcr senaryolarda React’in deklaratif modelinden ge\u00e7ici olarak ayr\u0131lmam\u0131z\u0131 ve zorunlu (imperative) kod yazmam\u0131z\u0131 sa\u011flayan bir k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcr.<\/p>\n React’te ref olu\u015fturman\u0131n ve bunlara eri\u015fmenin birka\u00e7 yolu vard\u0131r. Temelde, bir ref olu\u015fturduktan sonra, onu bir React elementine ( S\u0131n\u0131f bile\u015fenlerinde ref olu\u015fturman\u0131n standart yolu UI = f(state, props)<\/code>. \u00c7o\u011fu zaman, bir bile\u015fenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 state ve props arac\u0131l\u0131\u011f\u0131yla y\u00f6netiriz. \u00d6rne\u011fin, bir input alan\u0131n\u0131n de\u011ferini veya bir d\u00fc\u011fmenin aktif\/pasif durumunu state ile kontrol ederiz.<\/p>\n\n
play()<\/code> metodunu \u00e7a\u011f\u0131rmak).<\/li>\n<\/ul>\nRef Olu\u015fturma ve Eri\u015fme<\/h3>\n
<\/p>\nReact.createRef()<\/code> (S\u0131n\u0131f Bile\u015fenleri i\u00e7in)<\/h4>\nReact.createRef()<\/code> metodunu kullanmakt\u0131r. Bu metot, bile\u015fen olu\u015fturuldu\u011funda bir ref nesnesi d\u00f6nd\u00fcr\u00fcr.<\/p>\n\nimport React, { Component } from 'react';\n\nclass MyClassComponent extends Component {\n constructor(props) {\n super(props);\n this.myInputRef = React.createRef(); \/\/ Ref olu\u015fturma\n }\n\n componentDidMount() {\n \/\/ Bile\u015fen DOM'a ba\u011fland\u0131\u011f\u0131nda input'a odaklan\n this.myInputRef.current.focus();\n }\n\n render() {\n return (\n