- The three phases of life:
getInitialState(), before component is mounted.
componentWillMount(), immediately before mounting.
componentDidMount(), immediately after mounting. DOM-node-dependant initialisation happens here.
componentWillReceiveProps(), invoked when mounted component receives new props from parent. Use this when changing state (
shouldComponentUpdate(), invoked when component 'decides' whether or not to push updates to the DOM. Return
falsefrom this if we don't want React to update.
componentDidUpdate(), invoked immediately after updating.
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
The big, big difference between
state: state is private to components.
A parent component (or any other component) can never manipulate the state of another (with
setState or whatever).
- parent passes new props to child
- child handles new props with
- child handles new state in
- if component is stateful,
componentWIllReceivePropswill be enough here
Defaults set in
getInitialState will be used for initial rendering.
Note: this post references 'the snake game' a lot. That's over
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.