angr

writings from zac anger, who is not all that angry

More React Notes

April 27, 2016 — Zac Anger

Lifecycle &Co.

  • The three phases of life:
    • Mounting
    • Updating
    • Unmounting
  • Mounting:
    • getInitialState(), before component is mounted.
    • componentWillMount(), immediately before mounting.
    • componentDidMount(), immediately after mounting. DOM-node-dependant initialisation happens here.
  • Updating:
    • componentWillReceiveProps(), invoked when mounted component receives new props from parent. Use this when changing state (this.setState()).
    • shouldComponentUpdate(), invoked when component 'decides' whether or not to push updates to the DOM. Return false from this if we don't want React to update.
    • componentDidUpdate(), invoked immediately after updating.
  • Unmounting:
    • componentWillUnmount(), immediately before component unmounts and is destroyed. Clean-up goes here.
  • While mounted, component.forceUpdate() is also available. This is for any mounted component whose state has changed without this.setState().

The big, big difference between props and state: state is private to components. A parent component (or any other component) can never manipulate the state of another (with setState or whatever).

  • So:
    • parent passes new props to child
    • child handles new props with componentWillReceiveProps
    • calls setState if necessary
    • child handles new state in componentWillUpdate
    • if component is stateful, componentWIllReceiveProps will be enough here

Defaults set in getInitialState will be used for initial rendering.

tags: react, lifecycle, events

so, tweet it?  

BaconJS

January 19, 2016 — Zac Anger

Note: this post references 'the snake game' a lot. That's over
https://github.com/zacanger/extras/tree/master/bacon, now.

Bacon is a JS lib for FRP, like Rx, but not MS.

Here's some jQuery, because I don't know why.

var go = $('#clickMe').asEventStream('click')
go.onValue (
  () => $('#output').append('clicked!'))

Is it just me or is this tutorial using typescript? Eww, it totally is! Gross.

scan combinator is kinda like reduce, except async and produces multiple values. So, there's an initial value, and a function to combine them. Returned stream contains the aggregate.

var clicks = $('#example button').asEventStream('click')
  , counter = clicks
      .map(1)
      .scan(0, (x,y) => x + y)
counter.onValue(x => $('#example .output').html(x))

Ohh, okay, so the 'take' and 'skip' combinators are new. They do what they sound like. Basically like slicing arrays, but with streams.

read more...

tags: bacon, js, frp, streams, events, functional, programming, reactive

so, tweet it?  

zac anger?