با کانتینر و اجزای نمایشی، اپلیکیشن‌های بومی با واکنش بهتر بسازید

نمایش را از منطق جدا کنید و از آن پاداش بگیرید.

به عنوان یک توسعه دهنده React یا React Native، درک مفهوم کانتینر و مؤلفه های ارائه مهم است.

این الگوهای طراحی به تفکیک مناسب نگرانی ها کمک می کند. شما می توانید از این مفهوم برای اطمینان از ساختار کد خود به روشی قابل نگهداری و مقیاس پذیر استفاده کنید.

اجزای کانتینر چیست؟

اجزای کانتینر که به عنوان اجزای هوشمند نیز شناخته می شوند، مسئول مدیریت داده ها و منطق برنامه شما هستند. آنها کارهایی مانند واکشی داده ها از یک API، به روز رسانی وضعیت، و پردازش تعاملات کاربر را انجام می دهند.

برای پیاده‌سازی این ساختار، می‌توانید از کتابخانه‌ای مانند React-Redux برای اتصال اجزای خود به فروشگاه استفاده کنید و داده‌ها و اقدامات را به مؤلفه‌های فرزند یا مؤلفه‌های نمایشی ارسال کنید.

اجزای ارائه چیست؟

مؤلفه های نمایشی وظیفه نمایش داده ها از مؤلفه های اصلی خود را بر عهده دارند. آنها اغلب بدون حالت هستند و بر روی رابط کاربری و نمایش بصری داده ها تمرکز می کنند.

این حالت دستکاری و آزمایش آنها را آسان می کند و نام اجزای گنگ را برای آنها به ارمغان می آورد. حالت گنگ اجزای نمایشی این امکان را برای شما فراهم می کند که از آنها در کل برنامه خود استفاده مجدد کنید. این از کدهای بد و تکراری جلوگیری می کند.

چرا از کانتینر و اجزای نمایشی استفاده کنیم؟

پاسخ کوتاه و ساده به این سوال این است: جدایی نگرانی ها. این یک اصل کلیدی در چندین پارادایم از جمله برنامه نویسی شی گرا، کاربردی و جنبه گرا است. با این حال، بسیاری از توسعه دهندگان React تمایل دارند این مفاهیم را نادیده بگیرند و کدی بنویسند که فقط کار می کند.

کدی که فقط کار می کند عالی است، تا زمانی که کار خود را متوقف کند. نگهداری و به روز رسانی کدهای سازماندهی نشده دشوارتر است. این می تواند اضافه کردن ویژگی های جدید یا آوردن برنامه نویسان دیگر برای کار روی پروژه را دشوار کند. رفع این مشکلات پس از ایجاد یک حجم کاری زیاد است و بهتر است از شروع آنها جلوگیری شود.

به کارگیری الگوی طراحی کانتینر و اجزای نمایشی تضمین می‌کند که هر جزء در پروژه شما وظیفه‌ای واضح دارد که از عهده آن بر می‌آید. این یک ساختار ماژولار را به دست می‌آورد که در آن هر جزء بهینه‌سازی شده برای تکمیل برنامه شما گرد هم می‌آید.

ممکن است اجزای شما همچنان همپوشانی داشته باشند. تقسیم وظایف بین یک کانتینر و یک جزء نمایشی همیشه متمایز نیست. با این حال، به عنوان یک قاعده کلی، شما باید اجزای ارائه خود را بر روی داده های بصری متمرکز کنید، و اجزای ظرف خود را بر روی داده ها و منطق.

نحوه استفاده از Container و Components Presentational در React Native

در یک برنامه معمولی React Native، ایجاد کامپوننت هایی که حاوی کدهای ارائه و منطقی هستند، معمول است. ممکن است داده ها را از یک API واکشی کنید، وضعیت یک فرم را مدیریت کنید و خروجی را در یک کلاس نمایش دهید. یک برنامه ساده را در نظر بگیرید که لیستی از کاربران را از یک API دریافت می کند و نام و سن آنها را نمایش می دهد.

شما می توانید این کار را با یک جزء انجام دهید، اما منجر به کدهایی می شود که خواندن آن دشوار است، قابل استفاده مجدد نیست و تست و نگهداری آن سخت تر است.

مثلا:

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://example.com/users');
      const data = await response.json();
      setUsers(data);
    };

    fetchUsers();
  }, []);

  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>Name: {item.name}</Text>
          <Text>Age: {item.age}</Text>
        </View>
      )}
    />
  );
};

export default UserList;

در این مثال، UserList مسئول مدیریت وضعیت یک فیلد ورودی، واکشی داده ها از یک API و ارائه داده ها است.

راه بهتر و کارآمدتر برای پیاده سازی این است که منطق موجود در UserList را به اجزای ارائه و کانتینر جدا کنید.

شما می توانید یک جزء UserListContainer ایجاد کنید که مسئول واکشی و مدیریت داده های کاربر است. سپس می‌تواند این داده‌ها را به یک مؤلفه ارائه‌دهنده، UserList، به‌عنوان پشتوانه ارسال کند.

import React, { useState, useEffect } from 'react';

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://example.com/users');
      const data = await response.json();
      setUsers(data);
    };

    fetchUsers();
  }, []);

  return <UserList users={users} />;
};

export default UserListContainer;

شما می توانید ارائه را بین دو مؤلفه نمایشی جدا کنید: User و UserList. هر کدام مسئول ایجاد نشانه گذاری ساده بر اساس ورودی هایی است که دریافت می کنند.

import { View, Text, FlatList } from 'react-native';

// Presentational Component
const User = ({ name, age }) => (
  <View>
    <Text>Name: {name}</Text>
    <Text>Age: {age}</Text>
  </View>
);

// Presentational Component
const UserList = ({ users }) => (
  <FlatList
    data={users}
    keyExtractor={item => item.id}
    renderItem={({ item }) => <User name={item.name} age={item.age} />}
  />
);

کد جدید کامپوننت اصلی را به دو مولفه نمایشی User و User List و یک جزء Container User ListContainer جدا می کند.

بهترین روش ها برای پیاده سازی کانتینر و اجزای ارائه

هنگامی که از کامپوننت‌های کانتینر و نمایشی استفاده می‌کنید، مهم است که برخی از بهترین روش‌ها را دنبال کنید تا اطمینان حاصل کنید که اجزا به‌صورت مورد نظر کار می‌کنند.

1. هر جزء باید نقش مشخص و مشخصی داشته باشد. مؤلفه ظرف باید حالت را مدیریت کند و مؤلفه ارائه باید ارائه بصری را مدیریت کند.
2. در صورت امکان، به جای اجزای کلاس، از کامپوننت های تابعی استفاده کنید. آنها ساده تر، آسان تر برای آزمایش هستند و عملکرد بهتری ارائه می دهند.
3. از گنجاندن منطق یا عملکرد در مؤلفه ای که به هدف آن بی ربط است خودداری کنید. این کمک می کند تا اجزای سازنده متمرکز شوند و نگهداری و آزمایش آنها آسان باشد.
4. برای برقراری ارتباط بین اجزاء، از جداسازی واضح نگرانی‌ها و اجتناب از اجزای متصل به هم استفاده کنید.
5. به‌روزرسانی‌های غیرضروری وضعیت می‌تواند منجر به مشکلات عملکرد شود، بنابراین مهم است که فقط در صورت لزوم وضعیت را به‌روزرسانی کنید.

پیروی از این بهترین شیوه‌ها تضمین می‌کند که کانتینر و مؤلفه‌های ارائه به طور مؤثر با هم کار می‌کنند تا راه‌حلی تمیز، سازمان‌دهی شده و مقیاس‌پذیر برای مدیریت حالت و نمایش تصویری در برنامه React Native شما ارائه دهند.

مزایای استفاده از کانتینر و اجزای نمایشی

کانتینر و اجزای نمایشی می توانند چندین مزیت را ارائه دهند. آنها می توانند به بهبود ساختار کد، قابلیت نگهداری و مقیاس پذیری شما کمک کنند. آنها همچنین منجر به همکاری بهتر و تفویض وظایف بین تیم ها می شوند. آنها حتی می توانند منجر به افزایش عملکرد و بهینه سازی برنامه React Native شما شوند.

بهترین روش‌ها را برای پیاده‌سازی این مؤلفه‌ها دنبال کنید و می‌توانید برنامه‌های React Native بهتر و مقیاس‌پذیرتر بسازید.

منبع مقاله