the new react

Transcript

1. The New React Lifecycles @raphamorims
2. Hi, I’m Raphael アモリム
4. ^react@16.7.0
5. • Official Context API • createRef API • forwardRef API • Component Lifecycle Changes What’s New?
6. • Official Context API • createRef API • forwardRef API • Component Lifecycle Changes What’s New?
7. • Official Context API • createRef API • forwardRef API • Component Lifecycle Changes What’s New?
8. • Official Context API • createRef API • forwardRef API • Component Lifecycle Changes What’s New?
9. • Official Context API • createRef API • forwardRef API • Component Lifecycle Changes • Strict Mode What’s New?
10. • Official Context API • createRef API • forwardRef API • Component Lifecycle Changes • Strict Mode • React Hooks What’s New?
11. New context API const ThemeContext = React.createContext('light');
12. New context API const ThemeContext = React.createContext('light'); class ThemeProvider extends React.Component { state = {theme: 'light'}; render() { return ( <ThemeContext.Provider value={this.state.theme}> {this.props.children} </ThemeContext.Provider> ); } }
13. New context API class ThemedButton extends React.Component { render() { return ( <ThemeContext.Consumer> {theme => <Button theme={theme} />} </ThemeContext.Consumer> ); } }
14. createRef class InputComponent extends Component { constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { this.inputRef.current.focus(); } render() { return <input type="text" ref={this.inputRef} />; } }
15. Callback refs will continue to be supported in addition to the new createRef API. You don’t need to replace callback refs in your components.
16. const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>; fowardRef
17. import React from 'react'; function Application() { return ( <div> <Header /> <React.StrictMode> <div> <ComponentOne /> <ComponentTwo /> </div> </React.StrictMode> <Footer /> </div> ); } StrictMode * StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. 
 It activates additional checks and warnings for its descendants.
18. • Identifying components with unsafe lifecycles • Warning about legacy string ref API usage • Warning about deprecated findDOMNode usage • Detecting unexpected side effects • Detecting legacy context API StrictMode
19. StrictMode
20. StrictMode You probably are like this:
21. StrictMode No one likes a lint error, but it is useful.
22. New and the Old React Lifecycles
23. Legacy lifecycles will continue to work until version 17. New and the Old React Lifecycles
24. • componentWillMount • componentWillReceiveProps • componentWillUpdate Deprecated now and will be removed in React 17
25. • UNSAFE_componentWillMount • UNSAFE_componentWillReceiveProps • UNSAFE_componentWillUpdate Works on React 17 * Works with some bugs
26. • getDerivedStateFromProps • getSnapshotBeforeUpdate New lifecycles
27. getDerivedStateFromProps
28. getDerivedStateFromProps // Before class ExampleComponent extends React.Component { state = { isScrollingDown: false, }; componentWillReceiveProps(nextProps) { if (this.props.currentRow !== nextProps.currentRow) { this.setState({ isScrollingDown: nextProps.currentRow > this.props.currentRow, }); } } }
29. // After class ExampleComponent extends React.Component { // Initialize state in constructor, // Or with a property initializer. state = { isScrollingDown: false, lastRow: null, }; static getDerivedStateFromProps(props, state) { if (props.currentRow !== state.lastRow) { return { isScrollingDown: props.currentRow > state.lastRow, lastRow: props.currentRow, }; } // Return null to indicate no change to state. return null; } }
30. getSnapshotBeforeUpdate
31. // Before class ScrollingList extends Component { listRef = null; previousScrollOffset = null; componentWillUpdate(nextProps, nextState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (this.props.list.length < nextProps.list.length) { this.previousScrollOffset = this.listRef.scrollHeight - this.listRef.scrollTop; } } componentDidUpdate(prevProps, prevState) { // If previousScrollOffset is set, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. if (this.previousScrollOffset !== null) { this.listRef.scrollTop = this.listRef.scrollHeight - this.previousScrollOffset; this.previousScrollOffset = null; } } ...
32. class ScrollingList extends Component { listRef = null; getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { return ( this.listRef.scrollHeight - this.listRef.scrollTop ); } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { this.listRef.scrollTop = this.listRef.scrollHeight - snapshot; } } ...
34. reactjs.org/blog/2018/03/27/update-on-async-rendering.html Further Reading
35. migrating it.
36. github.com/facebook/jscodeshift
37. github.com/reactjs/react-codemod
38. $ jscodeshift -t ./unsafe-mod.js ./src --parser=flow -t <path to transform file>
39. $ jscodeshift -t ./unsafe-mod.js ./src --parser=flow files or directory to transform -t <path to transform file>
40. $ jscodeshift -t ./unsafe-mod.js ./src --parser=flow files or directory to transform -t <path to transform file>
41. - "enzyme": "^3.3.0", - "enzyme-adapter-react-16": “^1.1.1” - "react-test-renderer": "^16.2.0", + "enzyme": "^3.6.0", + "enzyme-adapter-react-16": “^1.5.0", + "react-test-renderer": “^16.5.1",
42. - wrapper.instance().componentWillMount(); + wrapper.instance().UNSAFE_componentWillMount();
43. Hooks
45. https://reactjs.org/docs/ hooks-intro.html
46. Hooks import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
47. Looks like Recompose. Feels like Recompose.
48. import { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
49. class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } }
50. Cleanup
51. class FriendStatus extends React.Component { constructor(props) { super(props); this.state = { isOnline: null }; this.handleStatusChange = this.handleStatusChange.bind(this); } componentDidMount() { ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); } componentWillUnmount() { ChatAPI.unsubscribeFromFriendStatus( this.props.friend.id, this.handleStatusChange ); } handleStatusChange(status) { this.setState({ isOnline: status.isOnline }); } render() {
52. import { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isOnline); } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // Specify how to clean up after this effect: return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }
53. Cleanup
54. // Create a Context const NumberContext = React.createContext(); // It returns an object with 2 values: // { Provider, Consumer } const context = useContext(Context);
55. Basic Hooks useState useEffect useContext Additional Hooks useReducer useCallback useMemo useRef useImperativeMethods useMutationEffect useLayoutEffect
56. https:// reactjs.org/blog/2018/03/29/ react-v-16-3.html
57. https://reactjs.org/docs/ hooks-reference.html