Junior — Middle

Компонентҳои React аз эҷод то хориҷ шудан аз DOM кадом марҳилаҳоро мегузаронанд?

sobes.tech AI

Ҷавоб аз AI

Компонентите на React преминават през няколко основни етапа от жизнения цикъл, от създаването до премахването им от DOM:

Монтиране (Mounting) — създаване и вмъкване на компонента в DOM.
- Constructor
- static getDerivedStateFromProps
- render
- componentDidMount
Обновяване (Updating) — случва се при промяна на props или state.
- static getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
Размонтиране (Unmounting) — премахване на компонента от DOM.
- componentWillUnmount
Обработка на грешки (Error Handling) — при възникване на грешки в дъщерните компоненти.
- static getDerivedStateFromError
- componentDidCatch

Пример за използване на методи от жизнения цикъл в класов компонент:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Компонентът е монтиран');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Компонентът е актуализиран');
  }

  componentWillUnmount() {
    console.log('Компонентът ще бъде премахнат');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

В функционалните компоненти с hooks, подобни етапи се реализират чрез useEffect и други hooks.

Гузашта Оянда