freeCodeCamp

5.8 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403617f	Manage Updates with Lifecycle Methods	6	false		Gestionar actualizaciones con métodos de ciclo de vida

Description

Otro método de ciclo de vida es componentWillReceiveProps() que se llama cuando un componente recibe nuevos accesorios. Este método recibe las nuevas propuestas como un argumento, que generalmente se escribe como nextProps . Puede usar este argumento y comparar con this.props y realizar acciones antes de que se actualice el componente. Por ejemplo, puede llamar a setState() localmente antes de que se procese la actualización. Otro método es componentDidUpdate() , y se llama inmediatamente después de que un componente se vuelve a procesar. Tenga en cuenta que la representación y el montaje se consideran cosas diferentes en el ciclo de vida del componente. Cuando se carga una página por primera vez, todos los componentes se montan y aquí es donde se llaman los métodos, por ejemplo, componentWillMount() y componentDidMount() . Después de esto, a medida que cambia el estado, los componentes se vuelven a representar. El próximo reto lo cubre con más detalle.

Instructions

El Dialog componente hijo recibe message de texto de su elemento principal, el componente Controller . Escriba el método componentWillReceiveProps() en el componente Dialog y this.props que registre this.props y nextProps en la consola. Deberá pasar nextProps como un argumento a este método y, aunque es posible nombrarlo de alguna manera, nextProps nombre nextProps aquí. A continuación, agregue componentDidUpdate() en el componente de Dialog , y registre una declaración que indique que el componente se ha actualizado. Este método funciona de manera similar a componentWillUpdate() , que se proporciona para usted. Ahora haga clic en el botón para cambiar el mensaje y ver la consola de su navegador. El orden de las sentencias de la consola muestra el orden en que se llaman los métodos. Nota: Deberá escribir los métodos del ciclo de vida como funciones normales y no como funciones de flecha para pasar las pruebas (tampoco hay ninguna ventaja al escribir métodos de ciclo de vida como funciones de flecha).

Tests

tests:
  - text: El componente <code>Controller</code> debe representar el componente <code>Dialog</code> como un elemento secundario.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find("Controller").length === 1 && mockedComponent.find("Dialog").length === 1; })(), "The <code>Controller</code> component should render the <code>Dialog</code> component as a child.");'
  - text: El método <code>componentWillReceiveProps</code> en el componente <code>Dialog</code> debe registrar <code>this.props</code> en la consola.
    testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,""); return lifecycleChild.includes("console.log") && lifecycleChild.includes("this.props") })(), "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.");'
  - text: El método <code>componentWillReceiveProps</code> en el componente <code>Dialog</code> debe registrar <code>nextProps</code> en la consola.
    testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,""); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes("console.log") && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.");'
  - text: El componente <code>Dialog</code> debe llamar al método <code>componentDidUpdate</code> y registrar un mensaje en la consola.
    testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,""); return lifecycleChild.length !== "undefined" && lifecycleChild.includes("console.log"); })(), "The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.");'

Challenge Seed

class Dialog extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillUpdate() {
    console.log('Component is about to update...');
  }
  // change code below this line

  // change code above this line
  render() {
    return <h1>{this.props.message}</h1>
  }
};

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'First Message'
    };
    this.changeMessage = this.changeMessage.bind(this);
  }
  changeMessage() {
    this.setState({
      message: 'Second Message'
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.changeMessage}>Update</button>
        <Dialog message={this.state.message}/>
      </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

5.8 KiB Raw Blame History