توضيح الفرق بين state و props في React

props: هي اختصار ل properties. وهي عبارة عن غرض Object يحوي بيانات، يتم تمريره لمكون React من مكون أب له.

لا نستطيع تغيير قيمة props فهي فقط للقراءة (قراءة قيمتها) وهي الخاصيات التي تظهر ونراها.

state: هي عبارة عن حالة البيانات التي تتغير خلال دورة حياة المكون (والتي يتم إعادة رسم المكون في حال تغييرها)

نستطيع تغيير قيمة state، لكن عن طريق الدوال المخصصة لها. this.setState.

مثال عن props:

لنفرض أنه لدينا الخصائص التالية للمكون Add:

هو مكون يقوم بجمع عددين n1,n2

function Add(props) {
  return (
    <div>
      {props.n1} + {props.n2} = {props.n1 + props.n2}
    </div>
  )
}

يتم تمريرهم كالتالي:

<Add n1={2} n2={3} />

لتكون props هنا:

props = {
	n1: 2,
	n2: 3
}

ونتيجة العرض:

2 + 3 = 5

____________

مثال عن state:

لنفرض أننا نريد استقبال دخل من المستخدم، وهو يتعلق بالمتغير n2:

function AddWithInput(props) {
  // تهيئة الحالة بقيمة 0 للمتغير
  // تعريف دالة خاصة بتغيير قيمة الحالة للمتغير
  const [n2, setN2] = React.useState(0)
  
  // الدالة التي تستمع لحدث التغيير
  function handleInputChange(event) {
    const input = event.target
    const newN2 = Number(input.value)
    // تغيير حالة n2
    setN2(newN2)
  }
  return (
    <div>
    // افترضنا أن الرقم الأول يتم تمريره من الأب أما الرقم الثاني من المستخدم
      {props.n1} +{' '}
    // حقل إدخال خاص بالرقم الثاني
      <input type="number" value={n2} onChange={handleInputChange} /> ={' '}
      {props.n1 + n2}
    </div>
  )
}

يمكننا استقبال props باستعمال خاصية destruction:

function AddWithInput({n1, initialN2 = 0}) {
  const [n2, setN2] = React.useState(initialN2)

فنكون قد قمنا بتعريف متغيرات مباشرة، لذلك يصبح باستطاعتنا استعمالها هكذا:

    <div>
      {n1} + {n2} = {n1 + n2}
    </div>

  return (
    <div>
      {n1} + <input type="number" value={n2} onChange={handleInputChange} /> ={' '}
      {n1 + n2}
    </div>
  )

إن كلاً من useState and useEffect تقوم على تحسين المكونات الدالية functional components لتصبح لها خاصيات مثل الأصناف.

useState:

يسمح للمكون بأن يكون له حالة، state ونصل لها مثل this.state (مثل المكونات الصفية) class component التي لها thsi

useEffect:

تضيف للمكونة الدالة lifecycle methods (دوال التحكم بدورة حياة المكون) مثل 

(componentDidMount, componentDidUpdate and componentWillUnmount)

عند استخدام useEffect:

الحالة المكافئة لـ componentDidMount : يتم تنفيذه عند إنشاء المكون:

useEffect(() => {

  },[]);// مصفوفة فارغة أي لا تراقب أي تغييرات

أما:

useEffect(() => {

},[x, y]); // تراقب تغييرات كل منها  وتقوم بالتحديث

أما: componentWillUnmount نعيد دالة مهمتها التنظيف و تعمل مثل callback function.

مثال: إزالة حدث الاستجابة لتحرك الفأرة:

useEffect(() => {
  window.addEventListener("mousemove", () => {});
  return () => {
    window.removeEventListener("mousemove", () => {})
  }
}, []);

باقِ الحالات:

useEffect( () => console.log("mount"), [] );

useEffect( () => console.log("will update data1"), [ data1 ] );

useEffect( () => console.log("will update any") );

useEffect( () => () => console.log("will update data1 or unmount"), [ data1 ] );

useEffect( () => () => console.log("unmount"), [] );