Ana içeriğe atla

Kayıtlar

Temel React Yazılım etiketine sahip yayınlar gösteriliyor

Mala Anlatır Gibi React — 3: React.memo, useMemo, useCallback

Mala Anlatır Gibi React — 3: React.memo, useMemo, useCallback React (Resim, 1.) useMemo , hesaplama açısından maliyetli işlemleri tekrarlamadan kaçınmak için kullanılır. Bir değer veya hesaplama işlemi, bağımlılık olarak belirlenen değişkenler değişmediği sürece önbelleğe alınır. Bu sayede, gereksiz yere tekrar hesaplama yapılmaz ve bileşenin performansı artar. Nasıl çalışır? import React , { useMemo } from 'react' ; function Ornek ( { num } ) { const expensiveComputation = useMemo ( () => { console . log ( "Başlıyor..." ); return num * 2 ; }, [num]); return < div > {expensiveComputation} </ div > ; } useCallback , bir fonksiyonu bağımlılıklarına göre önbelleğe almak için kullanılır. Bu sayede, fonksiyon her render'da yeniden oluşturulmaz. Özellikle, alt bileşenlere prop olarak fonksiyon geçerken faydalıdır, çünkü her render'da yeni bir fonksiyon oluşturulursa, alt bileşenler tekrar render olabilir. Nasıl çalışır? import Re...

Mala Anlatır Gibi React — 2: Temeller

 Mala Anlatır Gibi React — 2: Temeller Temelleri aslında ilk yazı da anlatmam gerekirdi, fakat pek önemli görmedim. Diğer yazı daha çok, React’ın yapısını anlamış ama hooks’ları anlayamamış kişilereydi. Ama fakat, diğer ufak-tefek şeylere de değinmek gerektiğini düşündüm. Projeyi ayağa kaldırmak Projenin bağımlılıklarını yüklemek: npm i Projeyi çalıştırmak: npm run dev import ve from import ve from, genellikle bir dosyayı veyahût kütüphaneyi dahil ederken kullanılır. Meselâ, React içinde react kütüphanesini kullanacağımız vâkit: import {useState} from ‘react’ kullanacağız. Burada import {} ile aldığımız şey, kütüphane içindeki fonksiyonlardır. from ise nereden olarak diye tanımlayabiliriz. şöyle de alabilirdik: import React from ‘react’ fakat kullanımı şöyle olurdu: React.useState() bu yüzden {} içerisiden almak mantıklı olacaktır. import ve from: Bir React dosyası dahil etmek bir React dosyası dahil etmek istediğiniz de ise aynı görevi görecektir. Fakat farklılık şu...