freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403617c	Use the Lifecycle Method componentWillMount	6	false		Utilice el método de ciclo de vida componentWillMount

Description

Los componentes de React tienen varios métodos especiales que brindan oportunidades para realizar acciones en puntos específicos del ciclo de vida de un componente. Estos se denominan métodos de ciclo de vida, o ganchos de ciclo de vida, y le permiten capturar componentes en ciertos puntos en el tiempo. Esto puede ser antes de que se procesen, antes de que se actualicen, antes de que reciban accesorios, antes de desmontar, y así sucesivamente. Aquí hay una lista de algunos de los métodos principales del ciclo de vida: componentWillMount() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() componentDidUpdate() componentWillUnmount() Las siguientes lecciones cubrirán algunos de los casos de uso básico para estos métodos de vida.

Instructions

El método componentWillMount() se llama antes que el método render() cuando un componente se está montando en el DOM. Registre algo en la consola dentro de componentWillMount() : es posible que desee tener abierta la consola del navegador para ver el resultado.

Tests

tests:
  - text: <code>MyComponent</code> debe renderizar un elemento <code>div</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").length === 1; })(), "<code>MyComponent</code> should render a <code>div</code> element.");'
  - text: <code>console.log</code> debe llamar en <code>componentWillMount</code> .
    testString: 'assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,""); return lifecycle.includes("console.log("); })(), "<code>console.log</code> should be called in <code>componentWillMount</code>.");'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    // change code below this line

    // change code above this line
  }
  render() {
    return <div />
  }
};

After Test

console.info('after the test');

Solution

// solution required

2.7 KiB Raw Blame History