?? ?? ??? ?? ???? ??? ????? ?? ??? ??? ?, ?? ??? ???? ?? ???? ?? ? ????.

? ???? ??? ?????.

• ?
• ?? ??
• ??????
• ?? ??

? ???? ?? ???? ?? ??? ?? ? ??? ?? ??? ????. ?? ??, ?????? ???? ?? ?? componentDidMount() ????? API ??? ???? ??? ?? ? ? ???? (??? ???? ?? ??).

?? ???? ?? ??? ???? ?? React Applications? ??? ?????. ?? ??? ???? ?? ??? ? ??? ???? ??? ? ? ?? ?????. ? ??? ?? ??? ??? ???? ???? ??? ???? ? ??? ???? ????.

?? ??

???? ?? ?? ????? ?? ??? ??????. ???? ???? ??? ?? ??? ???? ?????. ???? ??? ??? DOM? ?? ???? ??? ??? ??????.

?? ??? ???? constructor() , render() , componentDidMount() ? static getDerivedStateFromProps() ? ?? ???? ??? ? ????. ? ???? ?? ? ??? ????. ???? ?? ?????.

???()

?? ???? ??? ?? ???? ??? ?? ??? ? ? constructor() ???? ?????. ??? ?? ????.

 // ?? ?? ??? ???? ???? ...
??? (??) {
  // ... ??? ?? ...
  ?? (??);
  // ...? ?? ? ??? ????? ...
  this.state = {
    ??? ?? : ''
  };
  // ... ?? ?? ??? ???? ???? ??????.
}

constructor ?? ??? ?? ? ? ?? ? ? ?? ????? ?? ?? ?? ?????. ?? ??? ????? ???? (? ?? ? ????) DOM? ?? ?? ??? ????? ???? ??? ? ????. ??? ?? ??? ??? ?? ??? ?? ??? setState() ????? ???? ???? ?? ????!

?? ??? Refs? ?? ????? ????? ?? ?? ?? ? ??? React.createRef() ??? ? constructor ?? Ref? ??? ? ??? ????. REFS? ???? ?? ???? ? ????? ???? ? ??? ?? ??? ?? ??????? ??? ?? ??????.

 ??? (??) {
  ?? (??);
  this.state = {
    ??? ?? : ''
  };
  this.inputtext = react.createref ();
}

???()

render() ???? ?? ??? ??? ??? ??? ???? ????. ?? ????? ???????? ??? ? ? ????. React ?? ??? ?? ?? ?? ??? ???? ??? ?? ?? ?? ???? ?? ?????.

 ??? ?? ?? rect.component {
  // ??? ???? ?? ?? ???? ???????!
  ?? () {
    ?? (
      <div>
        <p>????? ??!</p>
      </div>
    ))
  }
}

??? ??? render() ? ?? ??? ????! ?? ?? ???? ????? ? ??? ?? ????.

 ??? ?? ?? rect.component {
  ?? () {
    ?? [
      <h2>?? ???? ??</h2> ,,,
      <frontend></frontend>,,,
      <backend></backend>
    ]]
  }
}

?? ?? ????? :

 ??? ?? ?? rect.component {
  ?? () {
    ?? (
      <react.fragment><p>????? ??!</p></react.fragment>
    ))
  }
}

???? ???? DOM ?? ??? ?? ?? (React Portal? ??)? ??? ? ? ????.

 // ?? ??? ??? ??? ??? ??? ??? ???? ????.
  // ??, ??? div ?? ???? ???? () {
    ???();
    this.el = document.createElement ( "div");
  }

  // ??? ?, ?? ?? ?? ??? ?? ??? ?????.
    Portalroot.appendChild (this.el);
  };

  // ?? ??? DOM?? ???? ?? ?? ?? ?? willUnmount = () => {? ?????.
    Portalroot.removechild (this.el);
  };

  // ?, ?? ??? ?? ??? ?? ??? ??? ?? ??? () ??? ? ? ????.
    const {children} = this.props;
    Return Reactdom.createPortal (children, this.el);
  }
}

?? render() ??? ???? ??? ? ? ???? ...

 ??? ?? ?? rect.component {
  ?? () {
    "Hello World!"
  }
}

??? null ?? boolean ? :

 ??? ?? ?? rect.component {
  ?? () {
    ? ??
  }
}

componentDidMount ()

?? componentDidMount() ? ? ??? ?? ???? ? ??? ?? ??? ?? ? ? (?, DOM? ???) ?????. React?? ???? ?? ?? ?? ? ?? ??????? ???? ?? ?? API? ????? ????.

??? ??? ?? ??? ??? ? ???? :

 Fetchusers () {
  Fetch (`https : // jsonplaceholder.typicode.com/user`)
    .Then (?? => response.json ())
    . (data =>
      this.setstate ({
        ??? : ???,
        IsLoading : False,
      })
    ))
  .catch (error => this.setState ({error, isloading : false}));
}

?? ?? componentDidMount() hook?? ???? ??????.

 componentDidMount () {
  this.fetchusers ();
}

??? ???? ?? ? ?? ????.

 componentDidMount () {
  el.addeventListener ()
}

?? ??????

static getDerivedStateFromProps ()

??? ??? ?????, static getDerivedStateFromProps() ???? ???? ????. ??? ??? render() ??? ??? ???? ?? ?? ?????. ??? ???? ?? ??? ??? ??????? ???? ? ????? ?? null ???????.

?? ??? ????? ??? ??? ?? ?? ?? ???? ??? ?? ??? ???????. ? ??? maxCount ? ?? ? ?? ???? ???????. maxCount ?? ?? ???? ?????.

??? ?? ?? ?????.

 ??? ?? ?? rect.component {
  ??? (??) {
    ?? (??)

    this.textinput = react.createref ();
    this.state = {
      ?? : 0
    }
  }

  handleIncrement = e => {
    e.preventDefault ();
    this.setstate ({value : this.state.value 1})
  };

  handledecrement = e => {
    e.preventDefault ();
    this.setstate ({value : this.state.value -1})
  };

  ?? () {
    ?? (
      <react.fragment><p>?? ? : {this.state.value}</p>
           
          -
        <counter maxcount="{this.state.value}"></counter></react.fragment>
    ))
  }
}

maxCount ? ?? ??? ??? ???, ?? Counter ?? ??? ?????.

 ??? ???? react.component {
  ?? = {
    ??? : 5
  }

  static getderivedstatefromprops (NextProps, Prevstate) {
    if (prevstate.counter <nextprops.maxcount : nextprops.maxcount>
        <p>? : {this.state.counter}</p>

      
    ))
  }
}</nextprops.maxcount>

Counter ?? ???? counter ? maxCount ?? ??? ?????. ???? maxCount ? ?? counter ???. ??? ???, ??? ?????? ????.

???? ??

???? ??? ?? ??? ?? ?? ??? ?? ? ? ?????. ???? ????? ?????? ?? ?? ??? ??? ??? ??? ??? ?????. ?, render() ? getDerivedStateFromProps() ?? ???? ?? ? ???? ?? ??? ??? ????.

shouldcomponentupdate ()

?? ??? ?? ?? ??? ???? shouldComponentUpdate() ???? ???? ?? ??? ???? ????? ?? ? ? ????. ? ??? ???? ???? ?? ? ?? ? ??? ?? ? ? ?????. ?? ??? true ???. ?? ?? ??? ?? ? ??? ?? ?????? ??? ?????.

 ?
  this.state.value! == Nextstate.value? ?????.
}

false ? ???? ?? ??? ?????? ?? ?? render() ???? ???? ?? ??? ?????.

getSnaphotbeforeupdate ()

??? ? ??? ? ??? ?? ???? ?? ??? ??? ???? ????. ??? getSnapshotBeforeUpdate() ??? ????. render() ??? ????? DOM? ?? ??? ?? ??? ???? ??. ?? ?? componentDidUpdate() ? ? ?? ?? ??? ?????.

?? ??? ??? ?? ??? ?????.

 getSnapshotbeforeupdate (prevprops, prevstate) {
  // ...
}

? ????? ???? ?? ?? ??? ?? ????. ?? ???? ?? ??? ???? ?????.

componentDidupdate ()

??? ??? componentDidUpdate() ? ???? ??? ?? ?? ?? ????. ?? ??? ??????? ??? ???? ??? ??? ???? ?? ??? ?? ?? ? ??? ??? ? ????.

 componentDidupdate (prevprops, prevstate) {
  if (prevstate.counter! == this.state.counter) {
    // ...
  }
}

getSnapshotBeforeUpdate() ??? ?? componentDidUpdate() ? ?? ?? ?? ??? ??? ?? ????.

 ComponentDidupDate (PrevProps, Prevstate, Snapshot) {
  if (prevstate.counter! == this.state.counter) {
    // ....
  }
}

?? ??

??? ??? ??? ??? ??? ?? ??. ????, ??? DOM?? ?? ??? ??? ? ?? ??? ? ?? ? ?????.

???? ??? ?? ? ???? : componentWillUnmount()

??? ?? ??? ???? ???? ?? ?????. ?? componentDidMount() ?? ?? ? ?? ??? ??? ????? ????.

 // ??? ?? ??? componentWillUnmount () {
  el.removeeventListener ()
}

?? ?? ??

?? ??? ??? ???? ??? ??? ? ????. ? ??? ???? ?? ?? ??? ??? ??? ????. ? ?? ?? ?? ??? ??? ??? ???? ? ????? ? ?? ??? ?????.

getDerivedStateFromError ()

??? getDerivedStateFromError() ???? ?? ?? ???? ???? ??? ?? ? ???? ???? ?? ??? ??? ???????.

 Class ErrorBoundary ?? rect.component {

  ??? (??) {
    ?? (??);
    this.state = {
      haserror : ??
    };
  }

  static getDerivedStateFromError (??) {
    return {haserror : true};
  }

  ?? () {
    if (this.state.haserror) {
      ?? (
        <h1>?????. ?? ??????? :(</h1>
      );
    }

    this.props.children;
  }
}

? ???? ?? ?? ???? ??? ???? ErrorBoundary ?? ??? "?, ?? ??? ??????"? ?????.

componentDidCatch ()

getDerivedStateFromError() ?? ??? ?? ???? ?? ?? ??? ??? ?????? ? ????? componentDidCatch() ?? ???? ????? DOM? ????????? ???????.

 componentDidCatch (??, ??) {
  // ??? ?? ??}

getDerivedStateFromError() ? componentDidCatch() ?? ErrorBoundary ?? ???? ??? ? ????.

 Class ErrorBoundary ?? rect.component {

  ??? (??) {
    ?? (??);
    this.state = {
      haserror : ??
    };
  }

  static getDerivedStateFromError (??) {
    return {haserror : true};
  }

  componentDidCatch (??, ??) {
    // ??? ?? ??}

  ?? () {
    if (this.state.haserror) {
      ?? (
        <h1>?????. ?? ??????? :(</h1>
      );
    }

    this.props.children;
  }
}

??? React ?? ??? ???????!

React ?? ??? DOM? ??? ?? ????? ???? ?? ?? ????. ?? "??"? ??? ???? ????? ?? ???? ???? ??? ????. ??? React ?? ??? ?????? ??? ?? ????? ?? ?? ??, ?? ??? DOM? ?? ? ???? ??? ??? ?? ?? ?????? ?? ?? ??? ???? ?? ??????.

??? ??? ?? ???? ?? ??? ??? ?, React? ??? ?????, ? ?? ???? ?? ??? ??? ???? ?? ?? ????? ?????. ??? ?? ? ?? ?? ???? ??? ???? ?? ? ??? ??? ?? ???? ????!

? ??? ?? ????? ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!