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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403617d	أستخدام Lifecycle Method componentDidMount	6	301422	use-the-lifecycle-method-componentdidmount

--description--

يحتاج معظم مطوري الشبكة الإلكترونية في وقت ما، إلى استدعاء نقطة نهاية API لاسترداد البيانات. إذا كنت تستخدم React، من المهم معرفة أين تنفذ هذا الإجراء.

أفضل ممارسة مع React هي إجراء مكالمات API أو أي مكالمات إلى الحاسب الألى (server) الخاص بك في طريقة lifecycle باسم componentDidMount(). ويدعى هذا الأسلوب بعد تركيب مكون في DOM. ستؤدي أي مكالمات إلى setState() إلى إنتاج عرض المكون الخاص بك. عند استدعاء API بهذه الطريقة، وتعيين حالتك بواسطة البيانات التي ينتجها API، سيتم تحديث تلقائياً بمجرد تلقي البيانات.

--instructions--

هناك مكالمة API وهمية في componentDidMount(). عيّن الحالة بعد 2.5 ثانية لمحاكاة الاتصال بالحاسب ألى (server) لاسترداد البيانات. هذا المثال يطلب مجموع المستخدمين النشاطين الحاليين للموقع. في طريقة الإنشاء، تقدم قيمة activeUsers في h1 بعد نص Active Users:. شاهد ما يحدث في النظرة، ولا تتردد في تغيير المهلة الزمنية لرؤية التأثيرات المختلفة.

--hints--

MyComponent يجب أن يقدم عنصر div الذي يغلف علامة h1.

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

يجب تحديث حالة المكون مع وظيفة timeout في componentDidMount.

assert(
  (() => {
    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
    return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(
      String(mockedComponent.instance().componentDidMount)
    );
  })()
);

علامة h1 يجب أن تعطي قيمة activeUsers من حالة MyComponent.

(() => {
  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
  const first = () => {
    mockedComponent.setState({ activeUsers: 1237 });
    return mockedComponent.find('h1').text();
  };
  const second = () => {
    mockedComponent.setState({ activeUsers: 1000 });
    return mockedComponent.find('h1').text();
  };
  assert(new RegExp('1237').test(first()) && new RegExp('1000').test(second()));
})();

--seed--

--after-user-code--

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

--seed-contents--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeUsers: null
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        activeUsers: 1273
      });
    }, 2500);
  }
  render() {
    return (
      <div>
        {/* Change code below this line */}
        <h1>Active Users: </h1>
        {/* Change code above this line */}
      </div>
    );
  }
}

--solutions--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeUsers: null
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        activeUsers: 1273
      });
    }, 2500);
  }
  render() {
    return (
      <div>
        <h1>Active Users: {this.state.activeUsers}</h1>
      </div>
    );
  }
}