Tepki Kancaları ve Bağlam ile Kodu Düzenleme

Büyük ölçekli React projeleri üzerinde çalışırken, daha iyi bakım ve ölçeklenebilirlik için iyi organize edilmiş bir kod tabanına sahip olmak çok önemlidir.

Bu makalede, React Hooks ve Context'i kullanmaya odaklanarak, React'te kaynak kodunuzu düzenlemek için en iyi uygulamaları inceleyeceğiz.

 

Durum Yönetimi için React Hooks Kullanma

React Hooks, sınıfları kullanmadan durum ve diğer React özelliklerini kullanmanıza izin veren bir işlevler koleksiyonudur. Bu, daha özlü ve okunabilir kod yazmaya yardımcı olur. Örneğin, bir bileşendeki durumu yönetmek için useState Kancasını kullanabiliriz.

İşte bir örnek:

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

 

bileşenlerin kombinasyonu

React'in faydalarından biri, bileşenleri yeniden kullanabilme yeteneğidir. Organizasyonu artırmak için, daha büyük bileşenler oluşturmak için daha küçük bileşenler kullanabiliriz.

Bu, işi parçalara ayırmaya ve kodun bakımını kolaylaştırmaya yardımcı olur. <Button> Örneğin, uygulamamızda birden çok yerde kullanmak üzere bir bileşen oluşturabiliriz:

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

 

Küresel durumu yönetmek için Bağlamı kullanma

Bağlam, React'te, ana bileşenlerden geçmeden alt bileşenler arasında veri paylaşmamıza izin veren bir mekanizmadır. Bu, veri özniteliklerinin birden çok bileşen düzeyinde iletilmesini önler ve kod karmaşıklığının azaltılmasına yardımcı olur.

Uygulamada geçerli dili paylaşmak için Bağlam kullanımına bir örnek:

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

 

Yukarıda, React Hooks ve Context kullanarak React kaynak kodunu düzenlemek için bazı en iyi uygulamalar yer almaktadır.