Deep Dive on the React Lifecycle @jcreamer898 http:/ /bit.ly/react-lifecycle 1
whoami Jonathan Creamer @jcreamer898 http:/ /bit.ly/react-lifecycle 2
whoami — Currently Senior Front End Engineer at Lonely Planet — Past JavaScript Engineer appendTo — Nashville, TN @jcreamer898 http:/ /bit.ly/react-lifecycle 3
Agenda 1. What is a React component? 2. Lifecycle methods 3. Use cases 4. Testing @jcreamer898 http:/ /bit.ly/react-lifecycle 4
Pure Functions A function is pure if... Given the same input, will always return the same output. Produces no side e ff ects. Relies on no external mutable state. — One way to build a React component is as a pure function @jcreamer898 http:/ /bit.ly/react-lifecycle 5
Can you even Component bro? function HelloWorld({ text }) { return ( <h1>{text}</h1> ); } ReactDOM.render(<HelloWorld text="hello world" />, document.body); — Might be all you need — Simple — State forced to higher level container components @jcreamer898 http:/ /bit.ly/react-lifecycle 6
JSX to JS function HelloWorld(_ref) { var text = _ref.text; return React.createElement( "h1", null, text ); } — JSX is an abstraction over creating element trees — Di ff erent renderers like ReactDOM — lowercase names refer to built-in components — Capitalized names refer to custom components @jcreamer898 http:/ /bit.ly/react-lifecycle 7
React Components as Classes class HelloWorld extends React.Component { render() { const { text } = this.props; return ( <h1>{text}</h1> ); } } — If all you have is render , stay functional — An abstract base class meant to be extended — Don't screw with props, they're Read Only — Sometimes we need some state @jcreamer898 http:/ /bit.ly/react-lifecycle 8
Lifecycle Methods Mounting, Updating, Unmounting @jcreamer898 http:/ /bit.ly/react-lifecycle 9
Mounting — constructor() — componentWillMount() — render() — componentDidMount() @jcreamer898 http:/ /bit.ly/react-lifecycle 10
Updating — componentWillReceiveProps() — shouldComponentUpdate() — componentWillUpdate() — render() — componentDidUpdate() @jcreamer898 http:/ /bit.ly/react-lifecycle 11
Unmounting — componentWillUnmount() @jcreamer898 http:/ /bit.ly/react-lifecycle 12
constructor @jcreamer898 http:/ /bit.ly/react-lifecycle 13
constructor aka init constructor(props) { super(props); this.state = {}; } — Perform any initial setup — Called once per mounted component — Initialize state — Must call super(props) @jcreamer898 http:/ /bit.ly/react-lifecycle 14
State — What's going on around here right now? — Has a user clicked or typed anything? — Any data needing to be fetched? — Any stored information? @jcreamer898 http:/ /bit.ly/react-lifecycle 15
setState class WYSIWYG extends React.Component { update() { /*...*/ } render() { const { text } = this.state; return ( <textarea onChange={this.update} value={text} /> ); } } — Pull from state — A lot of things happen when you do this... @jcreamer898 http:/ /bit.ly/react-lifecycle 16
setState constructor(props) { super(props); this.state = { text: "", }; this.update = this.update.bind(this); } update(e) { const text = e.target.value; this.setState({ text }); } — Must bind for this to work — A ! er setState , render will fi re — Do NOT update state w/ this.state.text = "foo"; @jcreamer898 http:/ /bit.ly/react-lifecycle 17
async setState // WRONG this.setState({ count: this.state.count + props.count }); doSomething(this.state.count); // RIGHT this.setState((prevState, props) => ({ counter: prevState.count + props.count })); — Don't rely on current state when computing @jcreamer898 http:/ /bit.ly/react-lifecycle 18
componentWillMount aka beforeDomReady @jcreamer898 http:/ /bit.ly/react-lifecycle 19
componentWillMount — props and state both ready — Can use for calling setState — Most times just use constructor @jcreamer898 http:/ /bit.ly/react-lifecycle 20
componentDidMount aka onDomReady @jcreamer898 http:/ /bit.ly/react-lifecycle 21
componentDidMount — jQuery plugin time :trollface: — DOM is ready here — Stand up plugins — ref is now a function — Dispatch actions @jcreamer898 http:/ /bit.ly/react-lifecycle 22
componentDidMount import ace from "aceeditor"; export default class Editor extends React.Component { constructor(props) { super(props); this.state = { /* init state */ }; } componentDidMount() { this.editor = ace.edit(this.$text); } render() { return ( <div ref={(node) => this.$text = node} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 23
componentDidMount import ace from "aceeditor"; export default class Editor extends React.Component { constructor(props) { super(props); this.state = { /* init state */ }; } componentDidMount() { this.editor = ace.edit(this.$text); } render() { return ( <div ref={(node) => this.$text = node} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 24
componentDidMount import ace from "aceeditor"; export default class Editor extends React.Component { constructor(props) { super(props); this.state = { /* init state */ }; } componentDidMount() { this.editor = ace.edit(this.$text); } render() { return ( <div ref={(node) => this.$text = node} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 25
componentDidMount import ace from "aceeditor"; export default class Editor extends React.Component { constructor(props) { super(props); this.state = { /* init state */ }; } componentDidMount() { this.editor = ace.edit(this.$text); } render() { return ( <div ref={(node) => this.$text = node} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 26
componentWillUnmount aka destroy @jcreamer898 http:/ /bit.ly/react-lifecycle 27
Be a good citizen componentWillUnmount() { this.editor.destroy(); } — Remove any event handlers or plugins — No leaks @jcreamer898 http:/ /bit.ly/react-lifecycle 28
componentWillUnmount class Chat extends Component { constructor(props) { super(props); this.state = { messages: [] }; } componentDidMount() { this.subscription = postal.subscribe({ topic: "message.added", callback: (message) => { this.setState({ messages: [...this.state.messages, message] }) } }); } componentWillUmount() { this.subscription.unsubscribe(); } render() { return ( <Messages messages={this.state.message} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 29
componentWillUnmount class Chat extends Component { constructor(props) { super(props); this.state = { messages: [] }; } componentDidMount() { this.subscription = postal.subscribe({ topic: "message.added", callback: (message) => { this.setState({ messages: [...this.state.messages, message] }) } }); } componentWillUmount() { this.subscription.unsubscribe(); } render() { return ( <Messages messages={this.state.message} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 30
componentWillUnmount class Chat extends Component { constructor(props) { super(props); this.state = { messages: [] }; } componentDidMount() { this.subscription = postal.subscribe({ topic: "message.added", callback: (message) => { this.setState({ messages: [...this.state.messages, message] }) } }); } componentWillUmount() { this.subscription.unsubscribe(); } render() { return ( <Messages messages={this.state.message} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 31
componentWillUnmount class Chat extends Component { constructor(props) { super(props); this.state = { messages: [] }; } componentDidMount() { this.subscription = postal.subscribe({ topic: "message.added", callback: (message) => { this.setState({ messages: [...this.state.messages, message] }) } }); } componentWillUmount() { this.subscription.unsubscribe(); } render() { return ( <Messages messages={this.state.message} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 32
componentWillUnmount class Chat extends Component { constructor(props) { super(props); this.state = { messages: [] }; } componentDidMount() { this.subscription = postal.subscribe({ topic: "message.added", callback: (message) => { this.setState({ messages: [...this.state.messages, message] }) } }); } componentWillUmount() { this.subscription.unsubscribe(); } render() { return ( <Messages messages={this.state.message} /> ) } } @jcreamer898 http:/ /bit.ly/react-lifecycle 33
IRL @jcreamer898 http:/ /bit.ly/react-lifecycle 34
IRL — San Francisco Restaurants @jcreamer898 http:/ /bit.ly/react-lifecycle 35
componentDidMount IRL export default class PoiDetail extends React.PureComponent { componentDidMount() { if (!this.props.poi) { this.fetchPoi(this.props.params.id); } if (!this.props.related) { this.fetchRelated(this.props.params.id); } } } — List is mounted on load, Poi gets mounted on route change — Use react-router params to get ID @jcreamer898 http:/ /bit.ly/react-lifecycle 36
Recommend
More recommend
