نوشته های عظیم عاطفی

درک راحت تر dynamic imports در React قسمت دوم

عظیم عاطفی — Wed, 24 Jul 2019 07:54:39 +0430

خب بعد اینکه مفهوم اولیه dynamic import رو فهمیدم (لینک قسمت اول) نیاز داریم که بتونیم اون رو داخل React پیاده سازی کنیم روش اولی که قراره امروز استفاده کنیم روش راحت تری نسبت به روش دوم هست برای اینکه بتونیم کار رو راحت شروع کنیم اول از همه با CRA یه پروژه رو ایجاد می کنیم تا بتونیم سفرمون به اعماق dynamic import آغاز کنیم .npx create-react-app reactdynamicimportبعد از اینکه پروژمون ایجاد شد فایل src/app.js رو باز می کنیم و کاستوم می کنیم.function App() { const [component, setComponent] = React.useState("i am initial text"); return (

{component}

); } export default App;خب حالا صفحه ای که لود میشه به صورت زیر خروجی دارهخب حالا پوشه src/comps رو ایجاد می کنیم و دو فایل persian.js و english.js رو ایجاد می کنیم که محتوای این دو فایل // english.js export default (text = "I'm English Boiiiiiiii") =>

{text}

; // persian.js export default (text = "زبان مادری ما فارسی است") =>

{text}

;از اونجایی که CRA به صورت پیش فرض import() رو داخل خودش جا داده توی این قسمت از اون استفاده می کنیم .خب حالا دو تابع برای فراخوانی فارسی و انگلیسی داریم . const loadpresian = () => { import("./comps/persian") .then(persian => { setComponent(persian.default()); }) .catch(err => { // Handle failure }); }; const loadenglish = () => { import("./comps/english") .then(english => { setComponent(english.default()); }) .catch(err => { // Handle failure }); }; خب همونجوری که میبینیم این دوتابع زمانی که فراخوانی میشن به صورت خیلی خفن و باحال سعی میکنن فایل js جدید رو import کنن و اگر موفق بشن ما متن داخل اون رو با متن داخل state خودمون عوض می کنیم . حالا کافیه دو دکمه هم به صفحه اضافه کنیم خب حالا بیایم تست کنیم ببینیم چه اتفاقی افتاد. خب حالا زمانی که دکمه فارسی رو میزنیم اتفاقی که میوفته اینه که ما میبینیم یه درخواست جدید ثبت می شه که این همون import خودمونه به تصویر زیر توجه کنید!خب حالا ده بارم که دیگه روی دکمه فارسی کلیک کنیم می بینیم که درخواست برای فایل جدیدی ثبت نمیشه یعنی هر فایل یه بار می تونه import بشه از اون به بعد دیگه توی صفحمون موجوده حالا دکمه English رو میزنیم.خب حالا میبینیم که باز هم همون اتفاق بالا افتاد :))) و ما به حالتی خیلی خفن تا زمانی که به یک فایل نیاز پیدا نکنیم اون رو اضافه نمی کنیم . در قسمت آتی دیگه خبری از آماده بودن همه چیز نیست و میخوایم یه سری چیز ها رو خودمون کانفیگ کنیم و به مفهوم Code Splitting هم پی ببریم پس همراه من باشید.

درک راحت تر dynamic imports در React قسمت اول

عظیم عاطفی — Fri, 19 Jul 2019 02:38:09 +0430

خب بهتره اول از اینکه اصلا بریم غرق بشیم توی اصل مطلب بیایم با هم درک کنیم که dynamic imports یعنی چی و چرا باید از اون استفاده کنیم؟خب اول از همه باید بگم که به صورت پیش فرض الان دستور import به صورت یه دونه اعلان ثابت(static declarations) هست خب این یعنی چی؟ در اصل ما یه آدرس که از جنس رشته هست رو بهش می دیم که بهش می گیم فلان ماژول رو از فلان جا برام بیارش خب چیزی که اینجا جالبه اینه که عملا عملیات linking و binding اون ماژول با فایل فعلی ما در زمان اجرا اتفاق نمی وفته و قبلش اتفاق میوفته یعنی همون زمانی که ما فایلمون رو لود می کنیم اون ماژول هم لود میشه نه زمانی که از اون ماژول توی صفحه استفاده می کنیم . حالا می خوام بگم که شما فرض کن 100 تا ماژول 10kbداری توی صفحه که اگه دقت کنی یعنی 1mb همون اول کار لود میشه به نظرم من که چیز بدیه به نظر شما چطور؟خب تا اینجای کار فهمیدیم که عملیات فعلی import چجوری اتفاق میوفته و یه نمونه از مشکلی که می تونه برای ما هم به وجود بیاره رو هم مثال زدیم.البته بگم که یه جاهایی هم بدردمون میخوره مخصوصا وقتی بخوایم همه چیز رو یک جا باندل کنیم که آفلاین کار کنه .خب حالا بیاین با هم به این فکر کنیم که ما می تونه اون ماژول مورد نظر خودمون رو زمان اجرا اضافه کنیم به جای اینکه قبل زمان اجرا باشه (حس می کنم یکم فارسی هاش اذیت میکنه runtime & pre-runtime خب یکم بهتر شد.) و این می تونه این ندای امید بخش رو برسونه که ما صرفا زمانی یک ماژول رو import می کنیم که به کار آید. بزارید من یه مثال بزنم که همه چیز واضح تر بشه واسمون نظرتون چیه؟فرض کنیم ما دوتا فایل english.js و persian.js رو داریم. بدین صورت://perisan.js export default persianText = () => { return { something } }//english.js export default englishText = () => { return { something }}فرض کنید این دوتا فایل کلی چیزهای دیگه هم داخلشه (صرفا از قوه تخیل خودتون استفاده کنید.) به نظرتون نیازه که وقتی کاربر فارسی زبان داخل سایت هست فایل مربوط به کاربر انگلیسی زمان هم لود شده باشه؟و در این جاست که به dynamic import نیاز مند میشیم. خب حالا استفاده از dynamic import میتونه به روش های مختلفی انجام بشه که توی قسمت بعدی این سری با هم بررسی می کنیم دو روشش رو سخت نگیرید زودی بهش می رسیم. راستی اگه خوشتون اومد و منتظر سری بعدی هم هستید توییتر منو می تونید فالو کنید تا زودتر مطلع بشید ازش ممنون که وقت گذاشتید!لینک قسمت دومhttps://twitter.com/azimat13

شخصی سازی TabBar در ReactNavigation قسمت اول

عظیم عاطفی — Sat, 27 Apr 2019 00:34:19 +0430

خب در ابتدا یه پروژه با استفاده از Expo میسازیم اگه تا حالا از Expo استفاده نکردید با دستور زیر راحت میتونید نصبش کنید و پروژه جدید رو بسازید !npm install expo-cli --global expo init AnimatedTabBar cd AnimatedTabBarخب حالا پروژه جدیدمون ساخته شده یادتون نره نوع پروژه Expo رو Blank نزارید تا با هم پیش بریم :)tabs several example screens and tabs using react-navigationبعد از این که پروژمون ساخته شد . پیکیج react-native-animatable رو هم نصبش می کنیم که یکم کارای انیمیشن رو برامون راحت تر کنه .پروژه ساخته شده با Expoخب حالا به داخل پوشه navigation میریم و فایل MainTabNavigator.js که ساختار اصلی TabBar ما داخلشه رو باز می کنیم . در کنار این فایل یک فایل با نام TabBar رو می سازیم . خب داخل فایل TabBar مون به صورت زیر کد می زنیم که آیکون و متن شو به صورت کنار هم بزاره :)/* /src/components/TabBar.js */ import React from "react"; import { View, StyleSheet, TouchableOpacity, Dimensions, Text } from "react-native"; const { width } = Dimensions.get("window"); const Styles = StyleSheet.create({ container: { flexDirection: "row", height: 52, elevation: 2 }, tabButton: { flex: 1, justifyContent: "space-around", alignItems: "center", flexDirection: "row-reverse" }, textStyle: { color: "gray", fontSize: 13 } }); const TabBar = props => { const { renderIcon, getLabelText, activeTintColor, inactiveTintColor, onTabPress, onTabLongPress, getAccessibilityLabel, navigation } = props; const { routes, index: activeRouteIndex } = navigation.state; let type = "slideInUp"; return ( {routes.map((route, routeIndex) => { const isRouteActive = routeIndex === activeRouteIndex; const tintColor = isRouteActive ? activeTintColor : inactiveTintColor; return ( { onTabPress({ route }); }} onLongPress={() => { onTabLongPress({ route }); }} accessibilityLabel={getAccessibilityLabel({ route })} > {isRouteActive ? ( {renderIcon({ route, focused: isRouteActive, tintColor })} {getLabelText({ route })} ) : ( {renderIcon({ route, focused: isRouteActive, tintColor })} )} ); })} ); }; export default TabBar; خب حالا داخل فایل MainTabNavigator.js باید فایل TabBar رو Import کنیم .import TabBar from "./TabBar";خب حالا باید کد زیر رو هم به createBottomTabNavigator مون اضافه کنیم تا کامپونت جدیدمون جایگزین کامپوننت دیفالت برای Tab Bar مون بشه .{ tabBarComponent: TabBar }بله حالا باید شکل تب بارمون عوض شده باشه به حالت زیر :خب حالا یکم به انیمیشن نیاز داریم تا تب بارمون کلی با حال بشه برای اینکار من می خوام روی تب فعالمون یک حالت overLay داشته باشم .حالا من یه overlay خیلی نرم ساختم که اضافه اش می کنم به کد TabBar شخصی سازه شده خودمون ./* /src/components/TabBar.js */ import React from "react"; import { View, StyleSheet, TouchableOpacity, Dimensions, Animated, Text } from "react-native"; const { width } = Dimensions.get("window"); const Styles = StyleSheet.create({ container: { flexDirection: "row", height: 52, elevation: 2 }, tabButton: { flex: 1, justifyContent: "space-around", alignItems: "center", flexDirection: "row-reverse" }, textStyle: { color: "gray", fontSize: 13 } }); const TabBar = props => { const { renderIcon, getLabelText, activeTintColor, inactiveTintColor, onTabPress, onTabLongPress, getAccessibilityLabel, navigation } = props; const { routes, index: activeRouteIndex } = navigation.state; return ( {routes.map((route, routeIndex) => { const isRouteActive = routeIndex === activeRouteIndex; const tintColor = isRouteActive ? activeTintColor : inactiveTintColor; return ( { onTabPress({ route }); }} onLongPress={() => { onTabLongPress({ route }); }} accessibilityLabel={getAccessibilityLabel({ route })} > {isRouteActive ? ( {renderIcon({ route, focused: isRouteActive, tintColor })} {getLabelText({ route })} ) : ( {renderIcon({ route, focused: isRouteActive, tintColor })} )} ); })} ); }; export default TabBar; خب حالا یک OverLay خیلی نرم روی تب اول هست ولی خب با کلیک روی تب بعدی جا به جا نمیشه. خب حالا کافیه overlay خودمون رو وقتی یوزر کلیک می کنه روی تب دیگه ای رو جا به جا کنیم برای اینکار اول باید یه متغیر انیمیشن بسازیم مثل زیر که مقدار اولیش برابر با تب فعالمون هست (دلیلش رو دیگه خودتون حدس بزنید)let animationValue = new Animated.Value(activeRouteIndex);هم اکنون با استفاده از transform جذاب overlay رو میخوایم جا به جا کنیم به شکل زیرخب حالا می بینیم که با هر بار کلیک روی تب جدید overlay مون میپره روی تب بعدی یعنی جا به جا نمیشه یجورایی خب سخت نگیرید کاری نداره که این بخاطر این مورد هست که با هر بار کلیک رو تب جدید کامپوننت دوباره رندر میشه برای این که این مشکل حل بشه باید قبل اینکه صفحمون جا به جا بشه overlay رو ببریم روی تب جدید و برای اینکه این عمل انجام بشه کافیه قبل عوض شدش route خودمون انیمیشن رو فراخوانی کنیم و مقدارشو از index تب قدیمی به index تب جدید با فاصله .5 ثانیه تغییر بدیم به شکل زیر یعنی به جای /* onPress={() => { onTabPress({ route }); }} */باید کد زیر رو قرار بدیم .onPress={() => { Animated.timing(animationValue, { toValue: routeIndex, duration: 500, useNativeDriver: true }).start(() => { onTabPress({ route }); }); }}به همین راحتی و هم اکنون می تونیم مشاهده کنیم که بلهههه بلاخره یکم جذاب تر شده طراحیمون .و هم اکنون قسمت اولمون به پایان رسید :) ایشالله توی قسمت دوم مشکلات رو رفع می کنیم و کلی قشنگترش می کنیم .آدرس گیت هاب پروژه : https://github.com/AZIMAT/AnimatedTabBar

روش بهینه سازی Flatlist در React Native

عظیم عاطفی — Thu, 25 Apr 2019 00:57:27 +0430

فلت لیست ها در React Native عملا یک نقش اساسی رو بازی می کنند و معمولا پیاده سازی های infinite scrolling باید با استفاده از این کامپوننت صورت بگیره چون بر خلاف ScrollView که تمامی آیتم های رنده شده رو چه داخل ViewPort باشند چه نباشند رو داخل رم نگه میداره FlatList که از خانواده Virtualizedlist ها هست زمانی که از آیتم رندر شده از ViewPort خارج بشه عملا از داخل رم پاک می شه.خب تا اینجایی که می بینیم FlatList خیلی خفنه اما! اینجا یه اما خیلی ترسناک هست و اونم اینه که Flatlist شما بهینه نوشته نشه عملا خیلی کندی و لگ کاربر شما حس می کنه یا توی اسکرول های سریع معمولا صفحه سفید رو میبینه که خیلی چیز قشنگی نیست :)خب حالا ما میخوایم با هم یکم Flatlist رو بهینه تر بنویسیم .خب اولین گام اینه که برای فرزنده های ساخته شده از لایف سایکل shouldcomponentupdate یا به جای ساختن فرزندان با استفاده از React.Component از React.PureComponent استفاده کنیم مطمئنم اگه اولین مرحله رو رعایت کنیم قطعا خیلی از مشکلات حل میشن . class Test extends React.PureComponent { ... }و هم اکنون میریم سراغ مرحله بعدی می تونیم داخل Flatlist مون از removeClippedSubviews که در اصل میاد هنگامی که آیتم مورد نظر از ViewPort حذف میشه به صورت کامل پاکش می کنه و دفعه بعد برای نمایشش دوباره از اول رندرش می کنه خب اینکه خیلی خفنه می تونیم همیشه استفاده کنیم اینجاست که به یک عدد نه! بر میخوریم متاسفانه طبقه گفته خود فیسبوک این یکم باگ داره هنوز که نیاز داره فیکس بشه ولی خب پیشنهاد من اینکه برای اندروید استفاده کنید .به صورت زیرremoveClippedSubviews={Platform.OS == 'ios' ? false : true}سومین مرحله ی ما در اصل استفاده از کامپوننت های ساده تر و عکس های کش شده و بهینه شده برای موبایل هست برای اینکه عکس های سریع تر لود بشن میتونیم از پکیج زیر استفاده کنیم که خیلی خفنه و سرعت لود عکس های کش رو خیلی افزایش میده .https://github.com/DylanVann/react-native-fast-imageحالا میایم سراغ مرحله ی آخر اگر هنوز هم مشکل داری تو Flatlist خودت که من بعید میدونم آخرین ترفند ما میتونه استفاده از getItemLayout باشه که عملا از البته زمانی به دردتون میخوره که اندازه تمامی کامپوننت های توی Flatlist مون هم اندازه باشن . داخل فلت لیست به صورت پیش فرض و پویا برای هر آیتم اندازه محاسبه میشه که خود این مورد باعث کند شدنش میشه با استفاده از getItemLayout ما خودمون محاسبه رو به عهده می گیریم. getItemLayout = (data, index) => ({ length: height, //height of our View offset: height* index, //position of item in Flatlist index // index of item }) راستی یادمون نره که از keyExtractor هم استفاده کنیم چون اگه نکنیم اینکارو همه کامپوننت ها هر بار از ViewPort خارج میشن و میخوان برگردن به ViewPort دوباره رندر میشن به جای اینکه از cache بیان.امیدوارم Flatlist هاتون همیشه بی باگ و سریع باشه.