diff --git a/packages/metal-component/src/Component.js b/packages/metal-component/src/Component.js index ff510c62..9cc89901 100644 --- a/packages/metal-component/src/Component.js +++ b/packages/metal-component/src/Component.js @@ -28,9 +28,6 @@ import { EventEmitter, EventHandler } from 'metal-events'; * created() { * } * - * willUpdate() { - * } - * * rendered() { * } * @@ -40,6 +37,19 @@ import { EventEmitter, EventHandler } from 'metal-events'; * attached() { * } * + * willReceiveState() { + * } + * + * // willReceiveProps is only available in JSX components + * willReceiveProps() { + * } + * + * shouldUpdate() { + * } + * + * willUpdate() { + * } + * * willDetach() { * } * @@ -417,9 +427,7 @@ class Component extends EventEmitter { * @protected */ handleStateWillChange_(event) { - if (this.willReceiveState) { - this.willReceiveState(event.changes); - } + this.willReceiveState(event.changes); } /** @@ -448,6 +456,15 @@ class Component extends EventEmitter { this.emit('rendered', firstRender); } + /** + * Informs the component that the renderer is about to update. Calls the + * component's `willUpdate` lifecycle method. + * @param {Object} changes + */ + informWillUpdate(...args) { + this.willUpdate(...args); + } + /** * Checks if the given function is a component constructor. * @param {!function()} fn Any function @@ -715,6 +732,20 @@ class Component extends EventEmitter { * Lifecycle. Fires before component is detached from the DOM. */ willDetach() {} + + /** + * Lifecycle. Called when the component is about to receive state changes. + * Provides a hook point for modifying state that can be used in the next + * rerender. + * @param {Object} changes Changes made to this.state + */ + willReceiveState() {} + + /** + * Lifecycle. Called when the component's renderer is about to update. + * @param {Object} changes + */ + willUpdate() {} } /** diff --git a/packages/metal-incremental-dom/src/IncrementalDomRenderer.js b/packages/metal-incremental-dom/src/IncrementalDomRenderer.js index 847b6b18..969f26a4 100644 --- a/packages/metal-incremental-dom/src/IncrementalDomRenderer.js +++ b/packages/metal-incremental-dom/src/IncrementalDomRenderer.js @@ -236,10 +236,10 @@ class IncrementalDomRenderer extends ComponentRenderer.constructor { * @param {Object} changes */ willUpdate_(component, changes) { - if (!component.willUpdate || !component.wasRendered || !changes) { + if (!component.wasRendered || !changes) { return; } - component.willUpdate(...this.buildShouldUpdateArgs(changes)); + component.informWillUpdate(...this.buildShouldUpdateArgs(changes)); } } diff --git a/packages/metal-jsx/src/JSXComponent.js b/packages/metal-jsx/src/JSXComponent.js index 94a0e190..6c4cc840 100644 --- a/packages/metal-jsx/src/JSXComponent.js +++ b/packages/metal-jsx/src/JSXComponent.js @@ -40,7 +40,7 @@ class JSXComponent extends Component { * @protected */ handleStateWillChange_(event) { - if (event.type !== 'state' && this.willReceiveProps) { + if (event.type !== 'state') { this.willReceiveProps(event.changes); } } @@ -64,6 +64,14 @@ class JSXComponent extends Component { return retObj; } + + /** + * Lifecycle. Called when the component is about to receive new props. + * Provides a hook point for modifying state that can be used in the next + * rerender. + * @param {Object} changes Changes made to this.props + */ + willReceiveProps() {} } JSXComponent.DATA_MANAGER = JSXDataManager;