-
Notifications
You must be signed in to change notification settings - Fork 30
Component Life Cycle Methods
React has a number of callbacks that you can define to hook into the component lifecycle. Reactive Record defines the same callbacks (with more rails-esque names) using the familiar active-record callback structure.
React Life Cycle Method | Ruby Macro Name | Called When |
---|---|---|
componentWillMount | before_mount | Invoked once, both on the client and server, immediately before the initial rendering occurs. You have access to the params, and any state updates will be effective before rendering, so this is where any complex or instance specific state initialization should occur. |
componentDidMount | after_mount | Invoked once, only on the client. immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components. If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method. |
componentWillReceiveProps | before_receive_props | Invoked when a component is receiving new props. This method is not called for the initial render. |
componentWillUpdate | before_update | Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render. |
componentDidUpdate | after_update | Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated. |
componentWillUnmount | before_unmount | Invoked immediately before a component is unmounted from the DOM. Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount. |
In addition between calls to before_receive_props
and before_update
the needs_update?
method will be called if it is defined in the component class. If this method returns a non-nil value then the component will update (be re-rendered) otherwise rendering will be skipped. This is the equivalent of the react shouldComponentUpdate
method.
Unlike React, Reactive Ruby will assume that components DO NOT update unless state, or params are explicitly changed. In react.js when an outer component re-renders, then all inner components will be re-rendered, and it is up to the component author to inspect the state, and param situation to determine if rendering should actually occur. This behavior is equivalent to using the React.js PureRenderMixin
In Reactive Ruby our experience has been it is much easier to write pure components (ones that only rerender when state or params explicitly change) because of the method provided to update state. If you need the standard React semantics simply define a should_update? method that always returns true.
Syntactic Example:
class FooBar
include React::Component
before_mount do # blocks may be attached directly to the macro
puts "I am about to be mounted"
end
after_mount :start_timers # the instances start_timer method will be called
def needs_update?
true # just go ahead and update
end
end