Closed sercanyeniyurt closed 6 years ago
abdurrahmanekr
commented
6 years ago Merhaba, bu mesajı görünce bayağı yazmaya başladım dedim bu çok oldu :) makale yazayım en iyisi :smile: bu linkten kendin için gerekli şeyleri elde edebileceğini düşünüyorum.
Bu arada bilgi olsun
(`) işareti arasına tek satır kod
(```) işareti arasına çok satır kod yazabilirsinBuradan daha detaylı bilgiye sahip olabilirsin.
sercanyeniyurt
commented
6 years ago Çok teşekkür ederim inceleyeceğim, şu işleri bi tam öğrenelim sizin gibi kamu hizmeti yapmayı düşünüyorum :) geri dönüş sağlayacağım.
5 Nisan 2018 19:27 tarihinde Avare Kodcu notifications@github.com yazdı:
Merhaba, bu mesajı görünce bayağı yazmaya başladım dedim bu çok oldu :) makale yazayım en iyisi 😄 bu linkten http://www.avarekodcu.com/konu/40/react-react-native-uygulamada-yasanan-performans-sorunlari kendin için gerekli şeyleri elde edebileceğini düşünüyorum.
Bu arada bilgi olsun
(`) işareti arasına tek satır kod (```) işareti arasına çok satır kod yazabilirsin
Buradan https://help.github.com/articles/basic-writing-and-formatting-syntax/ daha detaylı bilgiye sahip olabilirsin.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/abdurrahmanekr/bana-istedigini-sor/issues/42#issuecomment-378995597, or mute the thread https://github.com/notifications/unsubscribe-auth/AMZgXkkJ6EJQjWWAQpYFh20oKx8YFjdjks5tlkXigaJpZM4THp8W .
sercanyeniyurt
commented
6 years ago Merhabalar, öncelikle yardımlarınız için çok teşekkür ederim, benim göndermiş olduğum problemlerde stateler ile ilgili problem yaşamamaktayım. Soketleri kapatıp test ettim çünkü. Sürekli render yaptığını düşünüyorum bu yüzden ram yüksek oranda kullanılıyor. Componentleri iç içe kullanmak sebebiyle kaynaklanan yeniden render edilmemesi gereken yerler ile ilgili çözümünüzü inceledim ancak bu sorun da Accordion componentini hazır kullanmaktayım. Bu yapıdayken nasıl bir kullanım sağlamam gerektiğini pek anlayamadım.
Öncelikle Akordiyonu çalıştırıyorum;
<Accordion activeSection={this.state.activeSection} sections={this.state.dataSource} renderHeader={this._renderHeader} renderContent={this._renderContent} duration={400} onChange={this._setSection.bind(this)} />
Akordion Componenti : https://github.com/oblador/react-native-collapsible
activeSection,sections,renderHeader,renderContent,duration ve onChange propsları mevcut. Mevcut kodum da nasıl bir değişiklik yapmam lazım böyle hazır bir component kullanırken ?
Merhabalar,
Şuan yaptığım uygulamada veritabanın da soket kullanarak bir makine listesi çekiyorum ve sürekli olarak state leri güncelliyorum. 5-6 adet kayıt varken problem yoktu fakat kayıt sayısı 50 gibi ufak bir rakama çıktığında kasma problemleri başladı. Testlerim sonucunda bu problemin ne soket ne başka bir şey ile alakası olmadığını gördüm. Sorun render ederken oluşan kasmada. CPU Kullanım değeri %70 e varan ve geçen bir yük oluşmaktadır. Lokal makinemin donanım değerleri yüksek bununla alakalı bir sorun yok.
Bu uygulama da 50 adet veri listeleniyor, ve bu veriler akordiyon a aktarılıp akordiyon içerisine de grafikler ve bir takım datalar getiriyorum. Gerçek Cihaz da ve Emulator de denedim ikisinde de akordiyonlara basınca çok geç açılmalar bu sayfaya girdiğim de çok geç yüklenme oluyor.
Biraz araştırdım bulduğum net bir sonuç yok ama sanırım multithread ya da flatlist gibi eklentiler ile büyük verileri işlemek daha kolaymış, ya da lazyloading gibi birşeyler kullanmak vs...
Aslına bakılırsa büyük bir data yok ama iç içe Akordiyonlar ve viewler var bunlar nedeniyle render işlemi uzuyor ve kasmalar meydana geliyor. Multithread hariç diğerlerinin bir kaçını denedim sonuç değişmedi. Ancak sadece _renderHeader fonksiyonunu tek başına kullandığımda kasma son buluyor, haliyle render azaldığı için.
Bu kasma problemini nasıl çözebilirim?
Kodlar;
import React from "react"; import { StyleSheet,View,ActivityIndicator,FlatList,Alert,TouchableOpacity } from "react-native"; import { Container, Header, Title, Left, Right, Button, Body, Content,Text, Card, CardItem } from "native-base"; import Icon from 'react-native-vector-icons/FontAwesome'; import * as Animatable from 'react-native-animatable'; import Accordion from 'react-native-collapsible/Accordion'; import { PieChart } from 'react-native-svg-charts'; import { Text as SVGText } from 'react-native-svg'; import SocketIOClient from 'socket.io-client'; let SQLite = require('react-native-sqlite-storage');
export default class MachinePerformance extends React.Component { constructor (props) { super(props); this.socket = SocketIOClient('http://192.168.2.220:8080'); this.state = { dataSource: null, loaded: false, activeSection: false, collapsed: true }; } componentDidMount(){ this.fetchData(); }
} const styles = StyleSheet.create({ title: { width: '100%', fontSize: 19, fontWeight: 'bold', textAlign: 'center', color:'#6b6b6b', backgroundColor:'#eee', paddingTop:10, paddingBottom:10 }, tableTitle:{ flex: 1, flexDirection: 'row', backgroundColor: '#fafafa', marginTop:5 }, tableTitleText:{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '32%', borderRightColor: '#eee', borderRightWidth: 1, textAlign:'center', paddingBottom:10, paddingTop:10, fontSize: 10, fontWeight: 'bold', color:'#6b6b6b' }, acctableTitleText:{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '32%', borderRightColor: '#eee', borderRightWidth: 1, textAlign:'center', paddingBottom:10, paddingTop:10, fontSize: 16, fontWeight: 'bold', color:'#6b6b6b' }, container: { flex: 1, backgroundColor: '#fff', }, view: { flex: 1, flexDirection: 'row', backgroundColor: '#fafafa' }, collapseView: { flex: 1, flexDirection: 'row', padding: 5 }, optionList: { flex: 1, flexDirection: 'column' }, option:{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '100%' }, optionbadge:{ flex: 1, width:10, height:10, paddingTop:0, paddingLeft:0, paddingRight:0, paddingBottom:0, }, optionText: { marginLeft:3, fontSize:10 }, pieList: { width: '40%' }, machineStatus: { width: '60%'
});