freeCodeCamp/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403617c	أستخدام Lifecycle Method componentWillMount	6	301423	use-the-lifecycle-method-componentwillmount

--description--

لمكونات React عدة طرق مميزة تتيح فرصاً لعمل أفعال في نُقَط محددة من دورة حياة (lifecycle) أحد المكونات. هذه تسمى طرق دورة الحياة (lifecycle)، أو وظائف (hooks) دورة الحياة (lifecycle)، وتسمح بالتقاط المكونات في نُقَط زمنية معينة. ويمكن أن يحدث ذلك قبل أنتاجها، قبل تحديثهم، وقبل أن يتلقوا ميزات (props)، وقبل أن وقف التحميل (unmount)، وكذلك. فيما يلي قائمة ببعض طرق دورة الحياة (lifecycle) الرئيسة: componentWillMount() componentDidMount() shouldComponentUpdate() componentDidUpdate() componentWillUnmount() سوف تغطي الدروس العدّة التالية بعض حالات الاستخدام الأساسي لهذا طرق دورة الحياة (lifecycle).

ملاحظة: سيتم تجاهل componentWillMount طريقة دورة الحياة (Lifecycle) في إصدار بعد نوع 16.X وإزالتها في الإصدار نوع 17. تعلم المزيد في هذه المقالة

--instructions--

يتم استدعاء طريقة componentWillMount() قبل طريقة render() عندما يتم تحميل مكون إلى DOM. سجل شيء ما إلى وحدة التحكم (console) داخل componentWillMount() - قد ترغب في فتح وحدة تحكم المتصفح (browser console) الخاصة بك لمشاهدة الناتج.

--hints--

MyComponent يجب أن ينتج عنصر div.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
    return mockedComponent.find('div').length === 1;
  })()
);

console.log يجب استدعاءه في componentWillMount.

assert(
  (function () {
    const lifecycle = React.createElement(MyComponent)
      .type.prototype.componentWillMount.toString()
      .replace(/ /g, '');
    return lifecycle.includes('console.log(');
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<MyComponent />, document.getElementById('root'))

--seed-contents--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    // Change code below this line

    // Change code above this line
  }
  render() {
    return <div />
  }
};

--solutions--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    // Change code below this line
    console.log('Component is mounting...');
    // Change code above this line
  }
  render() {
    return <div />
  }
};