كيفية استخدام componentDidMount فى الfunctional component بلغة الreact.js

تقوم دالة الهوك useEffect بعمل تلك الوظيفة بالإضافة إلى باقي الدوال الخاصة بدورة حياة الكائن , كما هو موضح في الأمثلة القادمة 

يمكنك محاكاة الدالة componentDidMount ببساطة عن طريق إدخال مصفوفة فارغة في المدخل الثانى للدالة كما

في هذا الشكل

const HsoubComponent=()=>{
	const [a,setA()]=useState("");
	useEffect(()=>doSomething(),[]);
}

كما يمكنك محاكاة الدالة componentDidUpdate عن طريق إدخال القيم اللتي يترتب عليها تحديث الcomponent في المدخل الثاني كما في هذا الشكل

const HsoubComponent=()=>{
	const [a,setA()]=useState("");
	useEffect(()=>doSomething(),[a]);
}

كما يمكنك محاكاة الدالة componentWillUnmount عن طريق وضع return واللتي تمثل عملية الclean up او التنظيف للموارد

const HsoubComponent=()=>{
	const [a,setA()]=useState("");
	useEffect(()=>{
      doSomething()
      return(
      	doCleanup();
      )
    },[]);
}

يسمح لك الـ Effect Hook بتنفيذ تأثيرات جانبية في حياة المكون الخاص بك.

يمكنك التفكير في useEffect وكأنها عبارة عن componentDidMount + componentDidUpdate .componentWillUnmount

الشكل الحالي للـ API الخاص بـ useEffect هو كالآتي:

useEffect(didUpdate);

يمكنك أيضاً تصميم الـ componentDidMount عن طريق إعطاء الدالة useEffect متغيير بعد didUpdate وهو عبارة عن Array. إذا تغيرت أي قيمة بداخل هذا الـ Array، ستقوم useEffect بعمل نفس تأثير componentDidMount. يمكن أن يكون الـ Array فارغ أيضاً لعمل نفس التأثير.

useEffect(() => {
  // Component Did Mount
}, []);

في ال functional component لديك مايسمى بال lifecycle hook وهي عبارة عن دالة تقوم بإستدعائها من React مثل دالة الحالة useState وتسمى هذه الدالة ب useEffect ,تقوم بإستدعاء هذه الدالة كالآتي

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

function Example() {
  const [count, setCount] = useState(0);

  // دالة lifecycle hook
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

وتستخدم هذه الدالة بدلاً عن دالة componentDidMount حيث يتم تنفيذ دالة useEffect بعد إظهار العنصر.

ولإستخدام دالة useEffect في ثلاث حالات.

يتم تنفيذ الدالة مرة واحدة بعد إظهار العنصر عبر إضافة مصفوفة فارغة كمُدخل آخر للدالة كالآتي

useEffect(() => {
  // الكود الخاص بك
},[]); // المصفوفة الفارغة

أو لتنفيذ الدالة عندما يتم تحديث متغيرات وتقوم بوضع هذه المتغيرات داخل المصفوفة الفارغة لكي يتم تنفيذ الدالة كلما يتم تحديث هذه المتغيرات كالآتي

useEffect(() => {
  // الكود الخاص بك
},[var1,var2]); // المتغيرات

وإما تنفيذ الدالة في كل مرة يتم إظهار أو تحديث العنصر ويتم ذلك عبر عدم إدراج المصفوفة نهائياً

useEffect(() => {
  // الكود الخاص بك
}); 

يمكن محاكاة جميع lifecycle methods باستخدام الخطاف useEffect فمثلاً يمكن استبدال الكلاس التالي:

class A extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      mousePos: {x: 0,y: 0}
    };
    this.handleMouseMove = this.handleMouseMove.bind(this);
  }
  handleMouseMove(ev){
    this.setState({mousePos: {x: ev.offsetX, y: ev.offsetY}});
  }
  componentDidMount(){
    window.addEventListener("mousemove",this.handleMouseMove);
  }
  componentWillUnmount(){
    window.removeEventListener("mousemove",this.handleMouseMove);
  }
  render(){
    return <p>Mouse Pos: ({this.state.mousePos.x},{this.state.mousePos.y})</p>
  }
}

بالـfunctional Component التالية:

function A(){
  const [mousePos,setMousePos] = useState({x: 0,y: 0});
  function handleMouseMove(ev){
    setMousePos({x: ev.offsetX,y: ev.offsetY});
  }
  useEffect(() => {
    window.addEventListener("mousemove",handleMouseMove);
    return () => {
      window.removeEventListener("mousemove",handleMouseMove);
    }
  },[]);
  return <p>Mouse Pos: {mousePos.x,mousePos.y}</p>;
}

لنشرح مثالنا بشكل مبسط، كود componentDidMount صار داخل useEffect وكود componentWillUnmount صار داخل ما يسمى cleanup function وهو تابع نرده من داخل التابع الممرر للـuseEffect.

ولكن ما هذه المصفوفة التي نمررها في المعامل الثاني؟!!! للحقيقة تابع useEffect أقوى بكثير من توابع lifecycle ولذلك هذه المصفوفة موجودة وبرأيي لتفهم الخطاف useEffect حقاً فكر فيه بالطريقة التالية:

عند استدعاء الخطاف useEffect اﻻستدعاء التالي:

useEffect(() => {
  doSomethingWithAAndB(a,b);
  return () => {
    doCleanUpWithAAndB(a,b);
  };
},[a,b]);

فإننا نقول للـReact "كلما تغيرت قيمة a أو قيمة b نفذ التابع doSomethingWithAAndB، أوه ولا تنس تنفيذ التابع doCleanUpWithAAndB قبل ذلك لتنظيف آثار تنفيذ التابع doSomethingWithAAndB بالقيم القديمة"، فلنشرح هذه الجملة ولنفترض القيم البدائية لـa هي 0 وb هي 0 أي هما رقمان وبالنسبة لـ من أين أتى المتحولان a وb ففي غالب اﻷحيان هما معرفان بالشكل اﻵتي:

const [a,setA] = useState(0);
const [b,setB] = useState(0);

لكن قد يكونان معرفين على شكل useMemo أو أي شيء آخر، المهم أن هناك طريقة لتغيير قيمة a أو قيمة b تتسبب بعملية rerender للـReact Component.

اﻵن قيمة a هي 0 وقيمة b هي 0، عند أول render يستدعى الخطاف useEffect حينها التابع doSomethingWithAAndB ينفذ ممرراً له القيمتان 0 و0.

لنفترض أننا قمنا بعمل setA إلى القيمة 1 بفعل زر ما في الواجهة أو ما شابه، لقد تغيرت قيمة a اﻵن من 0 إلى 1 ولدينا rerender إذاً أولاً ننفذ التابع doCleanUpWithAAndB ممررين له القيمة القديمة لـa أي 0 وقيمة b التي لم تتغير 0، بعد ذلك يستدعى التابع doSomethingWithAAndB بالقيم الجديدة أي نمرر 1 و 0 كمعاملين لهذا التابع.

عند تغيير قيمة b يحصل نفس الشيء وهكذا، أما عندما يحدث unmount للـReact Component ينفذ التابع doCleanupWithAAndB بالقيم الحالية لـa وb فقط ولا ينفذ doSomethingWithAAndB.

معقد أليس كذلك؟ نعم أعترف بأن الخطاف useEffect معقد ولكن ما إن تفهم كيف يعمل ستجد بأنه أجمل بكثير من lifecycle methods.

أخيراً أشجعك على قراءة المزيد عن هذا الخطاف من هذا الرابط: 

https://wiki.hsoub.com/React/hooks_effect