React Hooks API'sine Başlarken

React 16.8, Şubat 2019'un başlarında resmi olarak yayınlandığında, React'te durum ve diğer özellikleri bir sınıf yazmadan kullanmanıza olanak tanıyan ek bir API ile birlikte gelirdi. Bu ek API'ye Hooks adı verilir ve bunlar, açık kaynaklı projelerden üretim uygulamalarında kullanılmaya kadar React ekosisteminde popüler hale gelmektedir.

React Hook'lar tamamen isteğe bağlıdır, yani mevcut kodun yeniden yazılması gereksizdir, herhangi bir kırılma değişikliği içermezler ve React 16.8'in piyasaya sürülmesiyle birlikte kullanılabilirler. Bazı meraklı geliştiriciler, Hooks API'yi resmi olarak piyasaya sürülmeden önce bile kullanıyorlardı, ancak o zamanlar kararlı değildi ve yalnızca deneysel bir özellikti. Artık kararlıdır ve React geliştiricilerinin kullanması önerilir.

Not : Genel olarak React veya JavaScript hakkında konuşmayacağız. Bu eğitimde çalışırken iyi bir ReactJS ve JavaScript bilgisi işinize yarayacaktır.

Tepki Kancaları Nedir?

React Hook'ları, React geliştiricilerinin işlevsel bileşenler içinde durum ve yaşam döngüsü yöntemlerini kullanmalarına izin veren yerleşik işlevlerdir, ayrıca mevcut kodla birlikte çalışırlar, böylece kolayca bir kod tabanına uyarlanabilirler. Hooks'un halka tanıtılma şekli, geliştiricilerin durumu işlevsel bileşenlerde kullanmalarına izin vermeleriydi, ancak kaputun altında Hooks bundan çok daha güçlü. React Geliştiricilerinin aşağıdaki avantajlardan yararlanmasına olanak tanır:

• Geliştirilmiş kod yeniden kullanımı;
• Daha iyi kod kompozisyonu;
• Daha iyi varsayılanlar;
• Özel kancaların kullanımıyla görsel olmayan mantığın paylaşılması;
• components ağacında yukarı ve aşağı hareket etme esnekliği.

React Hooks ile geliştiriciler, yalnızca kullanıcı arayüzü oluşturmaktan, durumu ve ayrıca mantığı işlemeye kadar yapmaları gereken hemen hemen her şey için işlevsel bileşenleri kullanma gücüne sahip oluyorlar - ki bu oldukça temiz.

Tepki Kancalarının Serbest Bırakılmasının Arkasındaki Motivasyon

ReactJS resmi belgelerine göre, React Hooks'un piyasaya sürülmesinin arkasındaki motivasyon aşağıdaki gibidir:

• Bileşenler arasında durum bilgisi olan mantığı yeniden kullanmak zordur.
  Hooks ile, mimarilerini veya yapılarını değiştirmeden bileşenleriniz arasındaki mantığı yeniden kullanabilirsiniz.
• Karmaşık bileşenlerin anlaşılması zor olabilir.
  Bileşenler büyüdüğünde ve birçok işlemi gerçekleştirdiğinde, uzun vadede anlaşılması zorlaşır. Kancalar, yaşam döngüsü yöntemlerine dayalı bir bölmeyi zorlamak yerine, belirli bir tek bileşeni, bu ayrılmış bileşenin hangi parçalarının ilişkili olduğuna (abonelik oluşturma veya veri getirme gibi) bağlı olarak çeşitli daha küçük işlevlere ayırmanıza izin vererek çözer.
• Sınıflar oldukça kafa karıştırıcı.
  Sınıflar, düzgün tepki vermeyi öğrenmenin önünde bir engeldir; this diğer dillerden farklı olarak JavaScript'te nasıl çalıştığını anlamanız gerekir. React Hooks, geliştiricilerin sınıfları kullanmak zorunda kalmadan en iyi React özelliklerini kullanmalarına izin vererek bu sorunu çözer.
  

Kanca Kuralları

Kanca teklif belgelerinde ana hatlarıyla belirtilen React çekirdek ekibi tarafından belirtildiği gibi kesinlikle uyulması gereken iki ana kural vardır.

• Kancaları döngüler, koşullar veya iç içe işlevler içinde kullanmadığınızdan emin olun;
• Hook'ları yalnızca React Functions'ın içinden kullanın.

Temel Tepki Kancaları

React 16.8 ile birlikte gönderilen 10 adet yerleşik kanca vardır, ancak temel (yaygın olarak kullanılan) kancalar şunları içerir:

• useState()
• useEffect()
• useContext()
• useReducer()

Bunlar, React Hook'larını kod tabanlarına benimsemiş olan React geliştiricileri tarafından yaygın olarak kullanılan 4 temel kancadır.

useState()

useState() kancası, React geliştiricilerinin, bir sınıf bileşenine dönüştürmeye gerek kalmadan işlevsel bileşenlerin içindeki durumu güncellemesine, işlemesine ve değiştirmesine olanak tanır. Aşağıdaki kod parçacığını kullanalım, basit bir Yaş sayacı bileşenidir ve bunu useState() kancasının gücünü ve sözdizimini açıklamak için kullanacağız.

 function App() { const [age, setAge] = useState(19); const handleClick = () => setAge(age + 1) return <div> I am {age} Years Old <div> <button onClick={handleClick}>Increase my age! </button> </div> </div> }

Fark ettiyseniz, bileşenimiz oldukça basit, özlü görünüyor ve artık işlevsel bir bileşen ve ayrıca bir sınıf bileşeninin sahip olacağı karmaşıklık düzeyine sahip değil.

useState() kancası, bir argüman olarak bir başlangıç ​​durumu alır ve ardından JavaScript'te dizi yıkımını kullanarak, dizideki iki değişkenin adı ne olabilir. İlk değişken gerçek durumdur, ikinci değişken ise yeni bir durum sağlayarak durumu güncellemeye yönelik bir fonksiyondur.

Bileşenimiz, React uygulamamızda işlendiğinde bu şekilde görünmelidir. “Yaşımı Arttır” düğmesine tıklandığında, çağın durumu değişecek ve bileşen, durumu olan bir sınıf bileşeni gibi çalışacaktı.

useEffect()

useEffect() kancası, etkin kod içeren bir işlevi kabul eder. İşlevsel bileşenlerde, mutasyonlar, abonelikler, zamanlayıcılar, günlük kaydı ve diğer etkilerin işlevsel bir bileşenin içine yerleştirilmesine izin verilmez, çünkü bunun yapılması, UI oluşturulduğunda birçok tutarsızlığa ve ayrıca kafa karıştırıcı hatalara neden olur.

useEffect() kancasını kullanırken, ona aktarılan etkin işlev, oluşturma ekranda görüntülendikten hemen sonra yürütülür. Efektler, temel olarak, React'in işlevsel yolundan oldukça farklı olan UI'ler oluşturmanın zorunlu yoluna göz atılır.

Varsayılan olarak, efektler çoğunlukla oluşturma tamamlandıktan sonra yürütülür, ancak belirli değerler değiştiğinde onları tetikleme seçeneğiniz de vardır.

useEffect() genellikle Tarayıcı/DOM API veya harici API benzeri veri alma veya aboneliklerle etkileşimler için kullanılan yan etkiler için devreye girer. Ayrıca, React yaşam döngüsü yöntemlerinin nasıl çalıştığını zaten biliyorsanız, useEffect() kancasını bileşen takma , güncelleme ve sökme olarak da düşünebilirsiniz - hepsi tek bir işlevde birleştirilir. İşlevsel bileşenlerde yaşam döngüsü yöntemlerini tekrarlamamızı sağlar.

useEffect() kancasını kullanarak yapabileceğimiz en temel yolu açıklamak için aşağıdaki kod parçacıklarını kullanacağız.

Adım 1: Uygulamanızın Durumunu Tanımlayın

 import React, {useState} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

İşlevsel bileşenlerin içindeki durumu işlemek için useState() kancasının nasıl kullanılacağına ilişkin önceki bölümde tartıştığımız gibi, tam adımı oluşturan uygulamamızın durumunu ayarlamak için kod parçacığımızda bunu kullandık.

2. Adım: useEffect Hook'u çağırın

 import React, {useState, useEffect} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); //Call the use effect hook useEffect(() => { setName({FirstName: 'Shedrack', surname: 'Akintayo'}) }, [])//pass in an empty array as a second argument return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

Şimdi useEffect kancasını içe aktardık ve oldukça düzenli ve özlü olan ad ve soyadı özelliğimizin durumunu ayarlamak için useEffect() işlevini de kullandık.

Boş bir dizi olan ikinci bağımsız değişkende useEffect kancasını fark etmiş olabilirsiniz; bunun nedeni, bir bağımlılık listesi olmayan setFullName yapılan bir çağrıyı içermesidir. İkinci argümanın iletilmesi sonsuz bir güncelleme zincirini ( componentDidUpdate() ) önleyecek ve ayrıca useEffect() componentDidMount yaşam döngüsü yöntemi olarak hareket etmesine ve ağaçtaki her değişikliği yeniden oluşturmadan bir kez işlemesine izin verecektir.

React uygulamamız şimdi şöyle görünmelidir:

Ayrıca, useEffect() işlevini çağırarak setTitle() () işlevi içinde uygulamamızın title özelliğini değiştirmeyi de kullanabiliriz, şöyle:

 import React, {useState, useEffect} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); //Call the use effect hook useEffect(() => { setName({firstName: 'Shedrack', surname: 'Akintayo'}) setTitle({'My Full Name'}) //Set Title }, [])// pass in an empty array as a second argument return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

Şimdi uygulamamız yeniden oluşturulduktan sonra, şimdi yeni başlığı gösteriyor.

useContext()

useContext() kancası, bir bağlam nesnesini, yani React.createContext döndürülen değeri kabul eder ve ardından o bağlam için geçerli bağlam değerini döndürür.

Bu kanca, işlevsel bileşenlere React uygulama içeriğinize kolay erişim sağlar. useContext kancası tanıtılmadan önce, bir sınıf bileşenindeki bir sağlayıcıdan aktarılan global durumunuza erişmek için bir contextType veya bir <Consumer> ayarlamanız gerekir.

Temel olarak, useContext kancası, uygulamanızı çeşitli düzeylerde manuel olarak geçirmeye gerek kalmadan uygulamanız genelinde verileri derinlemesine paylaşmanın bir yolu olan React Context API ile çalışır. Artık useContext() , Context'i kullanmayı biraz daha kolaylaştırıyor.

Aşağıdaki kod parçacıkları, Context API'nin nasıl çalıştığını ve useContext Hook'un onu nasıl daha iyi hale getirdiğini gösterecektir.

Bağlam API'sini Kullanmanın Normal Yolu

 import React from "react"; import ReactDOM from "react-dom"; const NumberContext = React.createContext(); function App() { return ( <NumberContext.Provider value={45}> <div> <Display /> </div> </NumberContext.Provider> ); } function Display() { return ( <NumberContext.Consumer> {value => <div>The answer to the question is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

Şimdi kod parçacığını parçalayalım ve her bir kavramı açıklayalım.

Aşağıda NumberContext adında bir bağlam oluşturuyoruz. İki değere sahip bir nesne döndürmek içindir: { Provider, Consumer } .

 const NumberContext = React.createContext();

Ardından, belirli bir değeri tüm çocuklara sunmak için oluşturduğumuz NumberContext döndürülen Provider değerini kullanırız.

 function App() { return ( <NumberContext.Provider value={45}> <div> <Display /> </div> </NumberContext.Provider> ); }

Bununla, tüm çocuklara sunduğumuz değeri almak için oluşturduğumuz NumberContext döndürülen Consumer değerini kullanabiliriz. Fark ettiyseniz, bu bileşen herhangi bir sahne almamıştır.

 function Display() { return ( <NumberContext.Consumer> {value => <div>The answer to the question is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

İçeriğimizi bir NumberContext.Consumer içine sararak ve değeri almak ve işlemek için render props yöntemini kullanarak App bileşeninden Display bileşenine değeri nasıl elde edebildiğimize dikkat edin.

Her şey iyi çalışıyor ve kullandığımız render props yöntemi, dinamik verileri işlemek için gerçekten iyi bir model, ancak uzun vadede, eğer alışkın değilseniz, bazı gereksiz yerleştirme ve karışıklıklara neden oluyor.

useContext Yöntemini Kullanma

useContext yöntemini açıklamak için, useContext kancasını kullanarak Display bileşenini yeniden yazacağız.

 // import useContext (or we could write React.useContext) import React, { useContext } from 'react'; // old code goes here function Display() { const value = useContext(NumberContext); return <div>The answer is {value}.</div>; }

Değerimizi göstermek için yapmamız gereken tek şey bu. Oldukça temiz, değil mi? useContext() kancasını çağırır ve oluşturduğumuz bağlam nesnesini iletirsiniz ve ondan değeri alırız.

Not: useContext kancasına iletilen argümanın bağlam nesnesinin kendisi olması gerektiğini ve useContext'i çağıran herhangi bir bileşenin bağlam değeri değiştiğinde her zaman yeniden oluşturulacağını unutmayın.

useReducer()

useReducer kancası, karmaşık durumları ve durumdaki geçişleri işlemek için kullanılır. Bir reducer işlevi ve ayrıca bir başlangıç ​​durumu girdisi alır; daha sonra, mevcut durumu ve ayrıca dizi yok etme yoluyla çıktı olarak bir dispatch işlevini döndürür.

Aşağıdaki kod, useReducer kancasını kullanmak için uygun sözdizimidir.

 const [state, dispatch] = useReducer(reducer, initialArg, init);

Bu, useState kancasına bir nevi alternatiftir; birden çok alt değerle ilgili karmaşık durum mantığına sahip olduğunuzda veya sonraki durum öncekine bağlı olduğunda genellikle useState tercih edilir.

Diğer Tepki Kancaları Mevcuttur

Özel Tepki Kancaları

Bir "özel Kanca", adlarının önüne use kelimesinin eklendiği ve diğer Kancaları çağırmak için kullanılabilen bir JavaScript işlevidir. Ayrıca, bileşen mantığını yeniden kullanılabilir işlevlere çıkarmanıza olanak tanır; bunlar, içindeki diğer Kancaları kullanabilen normal JavaScript işlevleridir ve ayrıca birden çok bileşen içinde kullanılabilecek ortak bir durum bilgisi içeren mantık içerir.

Aşağıdaki kod parçacıkları, sonsuz kaydırma uygulamak için özel bir React Hook örneğini göstermektedir (Paulo Levy tarafından):

 import { useState } from "react"; export const useInfiniteScroll = (start = 30, pace = 10) => { const [limit, setLimit] = useState(start); window.onscroll = () => { if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ) { setLimit(limit + pace); } }; return limit; };

Bu özel Kanca, start ve pace olmak üzere iki bağımsız değişkeni kabul eder. Başlangıç ​​argümanı, oluşturulacak öğelerin başlangıç ​​sayısıyken, hız argümanı, oluşturulacak sonraki öğelerin sayısıdır. Varsayılan olarak, start ​​ve pace bağımsız değişkenleri sırasıyla 30 ve 10 ayarlanmıştır; bu, Kanca'yı herhangi bir bağımsız değişken olmadan gerçekten arayabileceğiniz ve bunun yerine bu varsayılan değerlerin kullanılacağı anlamına gelir.

Bu Hook'u bir React uygulamasında kullanmak için, onu 'sahte' veri döndüren bir çevrimiçi API ile kullanırdık:

 import React, { useState, useEffect } from "react"; import { useInfiniteScroll } from "./useInfiniteScroll"; const App = () => { let infiniteScroll = useInfiniteScroll(); const [tableContent, setTableContent] = useState([]); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/") .then(response => response.json()) .then(json => setTableContent(json)); }, []); return ( <div style={{ textAlign: "center" }}> <table> <thead> <tr> <th>User ID</th> <th>Title</th> </tr> </thead> <tbody> {tableContent.slice(0, infiniteScroll).map(content => { return ( <tr key={content.id}> <td style={{ paddingTop: "10px" }}>{content.userId}</td> <td style={{ paddingTop: "10px" }}>{content.title}</td> </tr> ); })} </tbody> </table> </div> ); }; export default App;

Yukarıdaki kod, ekranda ilk veri sayısını görüntülemek için sonsuz kaydırma kancasını kullanan sahte verilerin ( userID ve title ) bir listesini oluşturacaktır.

Çözüm

Umarım bu eğitimde çalışmaktan keyif almışsınızdır. Aşağıdaki referanslardan her zaman React Hooks hakkında daha fazlasını okuyabilirsiniz.

Herhangi bir sorunuz varsa, bunları yorum bölümünde bırakabilirsiniz, her birini yanıtlamaktan mutluluk duyacağım!

Bu makalenin destekleyici deposu Github'da mevcuttur.

Kaynaklar ve İleri Okuma

• "Hooks API Referansı", React.js Docs
• "React Hooks Nedir?" Robin Wieruch
• " useContext Hook Nasıl Çalışır?" Dave Ceddia
• “React Hooks: useEffect() Nasıl Kullanılır?” Hossein Ahmadi, Medium
• “Kendi Özel Tepki Kancalarınızı Yazmak,” Aayush Jaiswal, Medium
• “React Hook Tariflerini Anlaması Kolay,” Gabe Ragland, useHooks()