Levent Yıldız: React Native (8) - Hooks ve ClassComponent ile useEffect, componentDidMount ve componentDidUpdate kullanımı

Marhaba,
bu yazımda sizlere React Hooks ile birlikte gelen useEffect kullanımını paylaşacağım.
Bilindiği üzere react ClassComponent yapısındaki yaşam döngüsünde component oluşturulduktan sonra componentDidMount() methodu devreye girerdi. Component her update işleminden sonra da componentDidUpdate() methodu çağrılmaktadır.

FunctionalComponent(Hooks) yapısında ise her iki methodun yerine de useEffect methodu çağrılmaktadır.
Yani bir component ekranda gösterildiğinde(mount) ve bu componentin değerleri güncellendiğinde yine useEffect methodu çağrılmaktadır.

Aşağıda product objesi üzerinden title alanını değiştirerek Class yapısında componentDidUpdate() methodunun Hooks yapısında ise useEffect methodunun çağrıldığı görülmektedir.

ÖRNEK Product Objesi :
{title: 'iPhone 11',itemCount: 2,price: 1500}

ProductTitleValue ve ProductTitleValueHooks componentleri üzerinden useEffect kullanımı anlatılmıştır. github üzerinden projeye erişerek bu componentleri inceleyebilirsiniz.

Ayrıca aşağıdaki adımları takip ederek kendi projenizde uygulayabilirsiniz.

ilk olarak react native ile bir proje oluşturun.

$ react-native init someProject

Terminal üzerinden projenin bulunduğu dizine gidin.

$ cd someProject

kök dizindeki App.js dosyasının içeriğini aşağıdaki şekilde güncelleyin

import React, {Component, useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {AppButton} from 'appComponent/Button';

export default class App extends Component {
  render() {
    return (
      <>
        <ProductTitleValue />
        <ProductTitleValueHooks />
      </>
    );
  }
}

export class ProductTitleValue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'iPhone 11',
      itemCount: 2,
      price: 1500,
    };
  }

  componentDidMount() {
    console.warn('Did mount!');
  }

  componentDidUpdate(prevProps, prevState) {
    console.warn('Did Update prevProps: ', prevProps);
    console.warn('Did Update prevState: ', prevState);
  }

  handleTitleChange = () => {
    this.setState({title: 'xiaomi mi 10 pro'});
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph2}>
          state : {JSON.stringify(this.state)}
        </Text>
        <AppButton          style={{marginTop: 10}}
          title="update title"          onBtnPress={() => this.handleTitleChange()}
        />
      </View>
    );
  }
}

export const ProductTitleValueHooks = props => {
  const [state, setState] = useState({
    title: 'iPhone 11',
    itemCount: 2,
    price: 1500,
  });

  const handleTitleChange = () => {
    setState({...state, title: 'xiaomi mi 10 pro'});
  };

  useEffect(() => {
    console.warn('Use Effect!');
  });

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph1}>state : {JSON.stringify(state)}</Text>
      <AppButton        style={{marginTop: 10}}
        title="update title"        onBtnPress={() => handleTitleChange()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
  },
  input: {height: 40, borderWidth: 1, marginBottom: 10},
  paragraph1: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'blue',
  },
  paragraph2: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

özet:

ClassComponent yapısı

component mount işleminden sonra "componentDidMount()" methodu çağrılmaktadır. Yani varsayılanda render dan sonra bu method çağrılır.
component güncelleme işleminden sonra ise "componentDidUpdate()" methodu çağrılır.

FunctionalComponent(Hooks) Yapısı

hem componentDidMount() hemde componentDidUpdate()'in çağrıldığı yerlerde useEffect() methodu çağrılır.
React tan import edilip projede fonksiyon olarak çağrılarak kullanılır. import {useEffect} from 'react';

github(state) : https://github.com/lvntyldz/tutorials/tree/7-react-hooks-useeffect/react-native-hooks-examples

github(projenin tamamı) : https://github.com/lvntyldz/tutorials/tree/master/react-native-hooks-examples

Levent Yıldız

4 Mayıs 2020 Pazartesi

React Native (8) - Hooks ve ClassComponent ile useEffect, componentDidMount ve componentDidUpdate kullanımı

Hiç yorum yok:

Yorum Gönder