sebmarkbage

function shallowCompare(a, b) {
  if (a === b) {
    return true;
  }
  if (typeof a === 'object' && typeof b === 'object' && hiddenClass(a) === hiddenClass(b)) {
    return !memcmp(a, b, sizeOfClass(a));
  }
  if (typeof a === 'function' && typeof b === 'function') {
    if (sourceLocation(a) === sourceLocation(b)) {
      return shallowCompare(getClosureContextOf(a), getClosureContextOf(b));

sebmarkbage

function measure(box) {
  const width = box.width + box.borderLeft + borderRight;
  return {
    width,
    offset(position) {
      return { left: position.left + box.borderLeft };
    }
  }
}

sebmarkbage

React Native Decoupling

-- ONLY REQUIRED FOR PACKAGING PURPOSES (should be handled by the environment) --

InitializeJavaScriptAppEngine

-- MOVEABLE TO FBJS OR REACT OR STOP USING --
deepFreezeAndThrowOnMutationInDev
- Deep-anything in JS is bad. This is really only needed for structures that we don't know about. I.e. missing attribute configurations. It is unfortunate for other optimizations and auto-marshalling. Perhaps we should require attribute configs or at least pick a more restricted default than one that easily over freezes or causes infinite loops.

sebmarkbage

setProps - depends on reading the last reconciled props from the current reconciled state of the app, at the time of the call. It also depends on an object that doesn't necessarily need to be there outside reconciliation. This is unlike setState, which is state that needs to be there. setState is queued up and merged at the time of reconciliation. Not at the time of the call. setState has a side-effect but is not a stateful nor mutative API.

isMounted - reads the current state of the tree, which may be stale if you're in a batch or reconciliation.

getDOMNode/findDOMNode - Reads the currently flushed node. This currently relies on the state of the system and that everything has flushed at this time. We could potentially do a forced render but that would still rely on the state of the system allowing us to synchronously being able to force a rerender of the system. Note: in 0.14, refs directly to DOM node will resolve to the DOM node. This allow you to get access to a node at the time of its choos

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

sebmarkbage

var Bar1 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();
    console.log('Bar1');
  }
};

var Bar2 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();

sebmarkbage

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name default.js
// ==/ClosureCompiler==

/**
 * @constructor
 */
function Foo(name) {
  this.name = name;

sebmarkbage

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

• ReactElement / ReactElement Factory
• ReactNode
• ReactComponent / ReactComponent Class

React Elements

sebmarkbage

Lower Case JSX Convention

All lower case JSX tags will now be treated as HTML/SVG elements. They will no longer be treated as custom components in scope.

The React element produced by JSX can be either a React class that exists in the local scope or a global scope HTML/SVG element depending on a convention.

Previous Behavior

Currently, when you use React JSX to define a HTML element you can use any known HTML tag. E.g:

sebmarkbage

React Element Factories and JSX

You probably came here because your code is calling your component as a plain function call. This is now deprecated:

var MyComponent = require('MyComponent');

function render() {
 return MyComponent({ foo: 'bar' }); // WARNING