5.8 KiB
5.8 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d403617f | Manage Updates with Lifecycle Methods | 6 | false | Gestionar actualizaciones con métodos de ciclo de vida |
Description
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
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