Mantığı ve kullanıcı arabirimini ayırmak, bileşenlerin yazılmasını ve test edilmesini kolaylaştırır.
Bu makalenin temel amacı, yeni bileşenlerimizi, her bileşenin yalnızca kendi verilerini, hata işlemeyi, yüklemeyi ve diğer gerekli mantığı önemsediği bir şekilde yazdığımızdan emin olmaktır (bileşenler arasında veri paylaşımını farklı bir makalede tartışacağız). ).

Bu neden önemli?

• Ölçeklenebilirlik: Gerçekten yüksek düzeyde ölçeklenebilir.
• Kaldırılabilirlik: Bir bileşenin silinmesi bugünden sonra bir sorun olmamalı, kırılma değişiklikleri veya gerilemeler olmuyor.
• Taşınabilirlik: Bileşeni herhangi bir yerde ve belki de aynı API'yi kullanan projeler arasında kullanma yeteneği.

Hands-

Şimdi koda inelim ve yeniden düzenlemeden önce ve sonra 2 örnek gösterelim.

Aşağıdaki örneği ele alalım ve bunun nasıl gerçekleşeceğini anlamaya çalışalım:

import React, { useMemo } from 'react';
import useAxios from 'axios-hooks'; const TodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;

Yukarıda görebileceğiniz gibi, axios kullanarak uzak API yapılandırması aracılığıyla verileri isteyerek Yapılacaklar listesini uygulamanın basit bir örneğine sahibiz.

Durum = YAPILACAK öğeleri çıkarmak için yapılan basit hesaplamayı fark edebiliyor musunuz? Cevabınız evet ise, o zaman aynı sayfadayız.

Yazının başında da açıkladığımız gibi bizim görevimiz mantığı UI'den izole etmek ama yukarıdaki örnekte aynı JS dosyasında mantığımız var, görevimize ulaşmak için ne yapılması gerektiğine bakalım.

Yani, her şeyden önce, mantığı bileşenden çıkarmamız gerekiyor.

import { useMemo } from 'react';
import useAxios from 'axios-hooks'; const useTodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); return [{ data, loading, error, todoItems }];
}; export default useTodoList;

Gördüğünüz gibi buna "useTodoList" adını verdik. Bu kanca, TodoList bileşeninin mantığını içermelidir.

Dosyada kullanıcı arayüzümüz olmadığını fark edebilirsiniz, bu özel bir kancadır.

Ancak ana bileşen olan “TodoList” nasıl görünmelidir?

import React from 'react'; import useTodoList from './useTodoList'; const TodoList = () => { const [{ data, loading, error, todoItems }] = useTodoList(); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;

Basit ha? İşte tam da bu nedenle, iş mantığının kullanıcı arabiriminin parçası olmadığı bileşenler oluşturmak ve bileşeniniz için bir API olarak özel kancayla ilgilenmek önemlidir.

Her bileşen bağımsız modda çalışırken bileşenler arasındaki iletişim ne olacak? Bir sonraki makalede ele alacağımız ilginç konu bu olacak.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• PlatoAiStream. Web3 Veri Zekası. Bilgi Genişletildi. Buradan Erişin.
• Adryenn Ashley ile Geleceği Basmak. Buradan Erişin.
• PREIPO® ile PRE-IPO Şirketlerinde Hisse Al ve Sat. Buradan Erişin.
• Kaynak: https://www.codementor.io/esmatnawahda/how-to-separate-logic-from-ui-with-react-components-by-esmat-ibrahim-javascript-in-plain-english-25c8b0j0uf