Method | Side effects1 | State updates2 | Example uses |
---|---|---|---|
Mounting | |||
componentWillMount |
✓ | Constructor equivalent for createClass |
|
render |
Create and return element(s) | ||
componentDidMount |
✓ | ✓ | DOM manipulations, network requests, etc. |
Updating | |||
componentWillReceiveProps |
✓ | Update state based on changed props |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Use Gists to store code you would like to remember later on | |
console.log(window); // log the "window" object to the console |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System; | |
using System.Collections.ObjectModel; | |
using System.ServiceModel; | |
using System.ServiceModel.Channels; | |
using System.ServiceModel.Description; | |
using System.ServiceModel.Dispatcher; | |
namespace Utilities.Wcf.Interceptors | |
{ | |
/// <summary> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Promise = require('bluebird'); | |
const React = require('react'); | |
const superagent = require('superagent'); | |
const assign = require('lodash/object/assign'); | |
const isArray = require('lodash/lang/isArray'); | |
const isFunction = require('lodash/lang/isFunction'); | |
const isObject = require('lodash/lang/isArray'); | |
const isString = require('lodash/lang/isString'); | |
const log = require('debug')('component:await'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const bypass = [ | |
// function names to avoid logging | |
]; | |
const collapsed = [ | |
// function names to groupCollapsed | |
]; | |
module.exports = function(babel) { | |
const { types: t } = babel; | |
const wrapFunctionBody = babel.template(`{ |
import rootReducer from '../my-rootreducer-dir';
function renderWithRedux(ui, { initialState, store = createStore(rootReducer, initialState) } = {}, renderFn = render) {
const obj = {
...renderFn(<Provider store={store}>{ui}</Provider>),
store,
};
obj.rerenderWithRedux = (el, nextState) => {
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This is a proper alternative to | |
// https://github.com/BuckleScript/bucklescript/blob/b9508105b1a35537bdea9a1fabd10f6c65f776b4/jscomp/bsb/templates/react-hooks/src/FetchedDogPictures/FetchedDogPictures.re#L14 | |
// The one in that file uses Promise, but that's *wrong*. | |
// We only used promise as a demo of its API. We'll remove it soon. | |
// As you can see below, the pure XMLHttpRequest code is just as clean, | |
// less mysterious for all, more performant, extensible, and actually correct. | |
// Ignore these externals for now. They're just for illustration | |
// purposes. I just copy pasted the Js code from |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
details summary { | |
cursor: pointer; | |
outline: none !important; | |
display: inline-block; | |
padding: 8px 12px; | |
padding-top: 10px; | |
border-radius: 4px; | |
overflow: hidden; | |
background: #F09825; | |
color: white; |