freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403617c	Use the Lifecycle Method componentWillMount	6	false		Use o componente Método de ciclo de vidaWillMount

Description

Os componentes React possuem vários métodos especiais que fornecem oportunidades para executar ações em pontos específicos no ciclo de vida de um componente. Eles são chamados de métodos de ciclo de vida ou ganchos do ciclo de vida e permitem que você capture componentes em determinados pontos no tempo. Isso pode ser feito antes de serem processados, antes de serem atualizados, antes de receberem adereços, antes de desmontarem e assim por diante. Aqui está uma lista de alguns dos principais métodos de ciclo de vida: componentWillMount() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() componentDidUpdate() componentWillUnmount() As próximas lições shouldComponentUpdate() alguns dos casos de uso básicos para esses métodos de ciclo de vida.

Instructions

O método componentWillMount() é chamado antes do método render() quando um componente está sendo montado no DOM. Registre algo no console dentro de componentWillMount() - você pode querer abrir o console do seu navegador para ver a saída.

Tests

tests:
  - text: <code>MyComponent</code> deve renderizar um 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> deve ser chamado em <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