88 lines
2.5 KiB
Markdown
88 lines
2.5 KiB
Markdown
|
---
|
||
|
|
id: 5a24c314108439a4d403617c
|
||
|
|
title: Use the Lifecycle Method componentWillMount
|
||
|
|
challengeType: 6
|
||
|
|
forumTopicId: 301423
|
||
|
|
dashedName: use-the-lifecycle-method-componentwillmount
|
||
|
|
---
|
||
|
|
|
||
|
|
# --description--
|
||
|
|
|
||
|
|
React components have several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component. These are called lifecycle methods, or lifecycle hooks, and allow you to catch components at certain points in time. This can be before they are rendered, before they update, before they receive props, before they unmount, and so on. Here is a list of some of the main lifecycle methods: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` The next several lessons will cover some of the basic use cases for these lifecycle methods.
|
||
|
|
|
||
|
|
**Note:** The `componentWillMount` Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. [(Source)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||
|
|
|
||
|
|
# --instructions--
|
||
|
|
|
||
|
|
The `componentWillMount()` method is called before the `render()` method when a component is being mounted to the DOM. Log something to the console within `componentWillMount()` - you may want to have your browser console open to see the output.
|
||
|
|
|
||
|
|
# --hints--
|
||
|
|
|
||
|
|
`MyComponent` should render a `div` element.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(
|
||
|
|
(function () {
|
||
|
|
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
|
||
|
|
return mockedComponent.find('div').length === 1;
|
||
|
|
})()
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
`console.log` should be called in `componentWillMount`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(
|
||
|
|
(function () {
|
||
|
|
const lifecycle = React.createElement(MyComponent)
|
||
|
|
.type.prototype.componentWillMount.toString()
|
||
|
|
.replace(/ /g, '');
|
||
|
|
return lifecycle.includes('console.log(');
|
||
|
|
})()
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
# --seed--
|
||
|
|
|
||
|
|
## --after-user-code--
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||
|
|
```
|
||
|
|
|
||
|
|
## --seed-contents--
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
class MyComponent extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
}
|
||
|
|
componentWillMount() {
|
||
|
|
// Change code below this line
|
||
|
|
|
||
|
|
// Change code above this line
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
return <div />
|
||
|
|
}
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
# --solutions--
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
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 />
|
||
|
|
}
|
||
|
|
};
|
||
|
|
```
|