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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403617c	Verwende die Lifecycle-Methode componentWillMount	6	301423	use-the-lifecycle-method-componentwillmount

--description--

React-Komponenten haben mehrere spezielle Methoden, die es ermöglichen, an bestimmten Punkten im Lebenszyklus (Lifecycle) einer Komponente Aktionen durchzuführen. Diese werden Lifecycle-Methoden oder Lifecycle-Hooks genannt und ermöglichen es dir, Komponenten zu bestimmten Zeitpunkten abzufangen. Das kann sein, bevor sie gerendert werden, bevor sie aktualisiert werden, bevor sie Eigenschaften erhalten, bevor sie demontiert werden, und so weiter. Hier ist eine Liste mit einigen der wichtigsten Lifecycle-Methoden: componentWillMount() componentDidMount() shouldComponentUpdate() componentDidUpdate() componentWillUnmount() In den nächsten Lektionen werden einige der grundlegenden Anwendungsfälle für diese Lifecycle-Methoden behandelt.

Hinweis: Die Lifecycle-Methode componentWillMount wird in einer zukünftigen Version von 16.X veraltet sein und in Version 17 entfernt werden. Erfahre mehr in diesem Artikel:

--instructions--

Die Methode componentWillMount() wird vor der Methode render() aufgerufen, wenn eine Komponente in das DOM eingebunden wird. Protokolliere etwas auf der Konsole innerhalb von componentWillMount() - du solltest die Konsole deines Browsers geöffnet haben, um die Ausgabe zu sehen.

--hints--

MyComponent sollte ein div-Element darstellen.

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

console.log sollte in componentWillMount aufgerufen werden.

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 />
  }
};