| // connect() is a function that injects Redux-related props into your component. | |
| // You can inject data and callbacks that change that data by dispatching actions. | |
| function connect(mapStateToProps, mapDispatchToProps) { | |
| // It lets us inject component as the last step so people can use it as a decorator. | |
| // Generally you don't need to worry about it. | |
| return function (WrappedComponent) { | |
| // It returns a component | |
| return class extends React.Component { | |
| render() { | |
| return ( |
| function mapValues(obj, fn) { | |
| return Object.keys(obj).reduce((result, key) => { | |
| result[key] = fn(obj[key], key); | |
| return result; | |
| }, {}); | |
| } | |
| function pick(obj, fn) { | |
| return Object.keys(obj).reduce((result, key) => { | |
| if (fn(obj[key])) { |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
defprotocol: defines an interfacedeftype: create a bare-bones object which implements a protocoldefrecord: creates an immutable persistent map which implements a protocolTypically you'll use defrecord (or even a basic map);
unless you need some specific Java inter-op,
where by you'll want to use deftype instead.
Note:
defprotocolallows you to add new abstractions in a clean way Rather than (like OOP) having polymorphism on the class itself,
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.