Türkçe

React'in Render Props deseninin gücünü keşfedin. Kod yeniden kullanılabilirliğini, bileşen kompozisyonunu ve sorumlulukların ayrılmasını nasıl destekleyerek uluslararası kitleler için esnek ve sürdürülebilir uygulamalar sağladığını öğrenin.

React Render Props Deseni: Küresel Kitleler İçin Esnek Bileşen Mantığı

Front-end geliştirmenin sürekli gelişen dünyasında, özellikle React ekosistemi içinde, mimari desenler ölçeklenebilir, sürdürülebilir ve yeniden kullanılabilir bileşenler oluşturmada kritik bir rol oynar. Bu desenler arasında, Render Props deseni, React bileşenleri arasında kod ve mantık paylaşımı için güçlü bir teknik olarak öne çıkar. Bu blog yazısı, Render Props desenini, faydalarını, kullanım alanlarını ve küresel bir kitle için sağlam ve uyarlanabilir uygulamalar oluşturmaya nasıl katkıda bulunduğunu kapsamlı bir şekilde anlatmayı amaçlamaktadır.

Render Props Nedir?

Render Prop, değeri bir fonksiyon olan bir prop kullanarak React bileşenleri arasında kod paylaşımı için basit bir tekniktir. Özünde, bir render prop'a sahip bir bileşen, bir React elemanı döndüren bir fonksiyon alır ve bu fonksiyonu bir şeyler render etmek için çağırır. Bileşen neyin render edileceğine doğrudan karar vermez; bu kararı, kendi iç durumuna ve mantığına erişim sağlayarak render prop fonksiyonuna devreder.

Şu temel örneği inceleyelim:


class DataProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    // Veri çekmeyi simüle et
    setTimeout(() => {
      this.setState({ data: 'Bir API'den gelen bazı veriler' });
    }, 1000);
  }

  render() {
    return this.props.render(this.state.data);
  }
}

function MyComponent() {
  return (
     (
        
{data ?

Veri: {data}

:

Yükleniyor...

}
)} /> ); }

Bu örnekte, DataProvider veri çeker ve bu veriyi MyComponent tarafından sağlanan render prop fonksiyonuna geçirir. MyComponent daha sonra bu veriyi içeriğini render etmek için kullanır.

Neden Render Props Kullanmalıyız?

Render Props deseni birkaç temel avantaj sunar:

Gerçek Dünya Kullanım Alanları ve Uluslararası Örnekler

Render Props deseni çeşitli senaryolarda değerlidir. İşte küresel bir kitleyi göz önünde bulunduran örneklerle birlikte bazı yaygın kullanım alanları:

1. Fare Takibi

Bir web sayfasında fare konumunu izlemek istediğinizi düşünün. Bir Render Prop kullanarak, fare koordinatlarını alt bileşenlerine sağlayan bir MouseTracker bileşeni oluşturabilirsiniz.


class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = event => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      
{this.props.render(this.state)}
); } } function MyComponent() { return ( (

Fare konumu ({x}, {y})

)} /> ); }

Bu, uluslararasılaştırılmış uygulamalar için kolayca uyarlanabilir. Örneğin, Japonya'daki sanatçılar tarafından kullanılan bir çizim uygulaması düşünün. Fare koordinatları fırça darbelerini kontrol etmek için kullanılabilir:


 (
    
  )}
/>

2. API'lerden Veri Çekme

API'lerden veri çekmek, web geliştirmede yaygın bir görevdir. Bir Render Prop bileşeni, veri çekme mantığını yönetebilir ve veriyi alt bileşenlerine sağlayabilir.


class APIFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null, loading: true, error: null };
  }

  async componentDidMount() {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data: data, loading: false });
    } catch (error) {
      this.setState({ error: error, loading: false });
    }
  }

  render() {
    return this.props.render(this.state);
  }
}

function MyComponent() {
  return (
     {
        if (loading) return 

Yükleniyor...

; if (error) return

Hata: {error.message}

; return
{JSON.stringify(data, null, 2)}
; }} /> ); }

Bu, yerelleştirilmiş verilerle uğraşırken özellikle kullanışlıdır. Örneğin, farklı bölgelerdeki kullanıcılar için döviz kurlarını görüntülediğinizi düşünün:


 {
    if (loading) return 

Döviz kurları yükleniyor...

; if (error) return

Döviz kurları çekilirken hata oluştu.

; return (
    {Object.entries(data.rates).map(([currency, rate]) => (
  • {currency}: {rate}
  • ))}
); }} />

3. Form Yönetimi

Form durumunu ve doğrulamasını yönetmek karmaşık olabilir. Bir Render Prop bileşeni, form mantığını kapsayabilir ve form durumunu ve yöneticilerini alt bileşenlerine sağlayabilir.


class FormHandler extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '', error: null };
  }

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    if (this.state.value.length < 5) {
      this.setState({ error: 'Değer en az 5 karakter uzunluğunda olmalıdır.' });
      return;
    }
    this.setState({ error: null });
    this.props.onSubmit(this.state.value);
  };

  render() {
    return this.props.render({
      value: this.state.value,
      handleChange: this.handleChange,
      handleSubmit: this.handleSubmit,
      error: this.state.error
    });
  }
}

function MyComponent() {
  return (
     alert(`Gönderilen değer: ${value}`)}
      render={({ value, handleChange, handleSubmit, error }) => (
        
{error &&

{error}

}
)} /> ); }

Uluslararası adres formatlarına uyum sağlamak için form doğrulama kurallarını uyarlamayı düşünün. `FormHandler` bileşeni genel kalabilirken, render prop farklı bölgeler için özel doğrulama ve arayüz mantığını tanımlar:


 sendAddressToServer(address)}
  render={({ value, handleChange, handleSubmit, error }) => (
    
{/* Bölgesel formatlara uyum sağlayan adres alanları */} {error &&

{error}

}
)} />

4. Özellik Bayrakları ve A/B Testi

Render Props, özellik bayraklarını yönetmek ve A/B testleri yapmak için de kullanılabilir. Bir Render Prop bileşeni, mevcut kullanıcıya veya rastgele oluşturulmuş bir bayrağa göre bir özelliğin hangi sürümünün render edileceğini belirleyebilir.


class FeatureFlag extends React.Component {
  constructor(props) {
    super(props);
    this.state = { enabled: Math.random() < this.props.probability };
  }

  render() {
    return this.props.render(this.state.enabled);
  }
}

function MyComponent() {
  return (
     {
        if (enabled) {
          return 

Yeni Özellik!

; } else { return

Eski Özellik

; } }} /> ); }

Küresel bir kitle için A/B testi yaparken, kullanıcıları dil, bölge veya diğer demografik verilere göre segmentlere ayırmak önemlidir. `FeatureFlag` bileşeni, bir özelliğin hangi sürümünün görüntüleneceğini belirlerken bu faktörleri dikkate alacak şekilde değiştirilebilir:


 {
    return isEnabled ?  : ;
  }}
/>

Render Props'a Alternatifler: Yüksek Mertebeden Bileşenler (HOC'ler) ve Hook'lar

Render Props güçlü bir desen olsa da, benzer sonuçlar elde edebilecek alternatif yaklaşımlar da vardır. İki popüler alternatif, Yüksek Mertebeden Bileşenler (HOC'ler) ve Hook'lardır.

Yüksek Mertebeden Bileşenler (HOC'ler)

Yüksek Mertebeden Bileşen (HOC), argüman olarak bir bileşen alan ve yeni, geliştirilmiş bir bileşen döndüren bir fonksiyondur. HOC'ler genellikle mevcut bileşenlere işlevsellik veya mantık eklemek için kullanılır.

Örneğin, withMouse HOC'u bir bileşene fare izleme işlevselliği sağlayabilir:


function withMouse(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { x: 0, y: 0 };
    }

    handleMouseMove = event => {
      this.setState({ x: event.clientX, y: event.clientY });
    };

    render() {
      return (
        
); } }; } function MyComponent(props) { return (

Fare konumu ({props.mouse.x}, {props.mouse.y})

); } const EnhancedComponent = withMouse(MyComponent);

HOC'ler kodun yeniden kullanılmasını sağlasa da, prop adı çakışmalarına yol açabilir ve "wrapper hell" (sarmalayıcı cehennemi) olarak bilinen bir fenomenle bileşen kompozisyonunu zorlaştırabilir.

Hook'lar

React 16.8'de tanıtılan React Hook'ları, bileşenler arasında durum bilgisi olan mantığı yeniden kullanmak için daha doğrudan ve ifade gücü yüksek bir yol sağlar. Hook'lar, fonksiyon bileşenlerinden React durumuna ve yaşam döngüsü özelliklerine "kanca atmanıza" olanak tanır.

useMousePosition hook'u kullanılarak, fare izleme işlevselliği aşağıdaki gibi uygulanabilir:


import { useState, useEffect } from 'react';

function useMousePosition() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    function handleMouseMove(event) {
      setMousePosition({ x: event.clientX, y: event.clientY });
    }

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return mousePosition;
}

function MyComponent() {
  const mousePosition = useMousePosition();
  return (
    

Fare konumu ({mousePosition.x}, {mousePosition.y})

); }

Hook'lar, Render Props ve HOC'lere kıyasla durum bilgisi olan mantığı yeniden kullanmak için daha temiz ve daha kısa bir yol sunar. Ayrıca daha iyi kod okunabilirliği ve sürdürülebilirliği teşvik ederler.

Render Props ve Hook'lar: Doğru Aracı Seçmek

Render Props ve Hook'lar arasında karar vermek, projenizin özel gereksinimlerine ve kişisel tercihlerinize bağlıdır. İşte temel farklılıklarının bir özeti:

Render Props Kullanımı İçin En İyi Uygulamalar

Render Props desenini etkili bir şekilde kullanmak için aşağıdaki en iyi uygulamaları göz önünde bulundurun:

Sonuç

Render Props deseni, esnek ve yeniden kullanılabilir React bileşenleri oluşturmak için değerli bir tekniktir. Mantığı kapsayarak ve bir render prop aracılığıyla bileşenlere sunarak, kodun yeniden kullanılabilirliğini, bileşen kompozisyonunu ve sorumlulukların ayrılmasını teşvik edebilirsiniz. Hook'lar daha modern ve genellikle daha basit bir alternatif sunsa da, Render Props, özellikle eski kodlarla veya render süreci üzerinde hassas kontrol gerektiren senaryolarla uğraşırken React geliştiricisinin cephaneliğinde güçlü bir araç olmaya devam etmektedir.

Render Props deseninin faydalarını ve en iyi uygulamalarını anlayarak, farklı bölgeler ve kültürler arasında tutarlı ve ilgi çekici bir kullanıcı deneyimi sağlayan, çeşitli ve küresel bir kitleye hitap eden sağlam ve uyarlanabilir uygulamalar oluşturabilirsiniz. Önemli olan, projenizin özel ihtiyaçlarına ve ekibinizin uzmanlığına dayanarak doğru deseni – Render Props, HOC'ler veya Hook'lar – seçmektir. Mimari kararlar alırken her zaman kod okunabilirliğine, sürdürülebilirliğe ve performansa öncelik vermeyi unutmayın.