Understanding React

Understanding React

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

June 08, 2018
Tweet

Transcript

  1. 3.
  2. 5.
  3. 6.
  4. 7.

    Software Developer Engineer @godaddy JS Foundation Member @jquery Maintainer React-TV

    Raphael Amorim Previously @globocom, @petrobras 22 years old Mozillian Metido a besta
  5. 8.
  6. 9.
  7. 14.

    When the program is running, you may have several instances

    of this component on screen, each with its own properties and local state.
  8. 17.

    In this traditional UI model, it is up to you

    take care of creating and destroying child component instances.
  9. 18.

    If a Form component wants to render a Button component.

    It needs to create its instance, and manually keep it up to date with any new information.
  10. 19.

    class Form extends TraditionalObjectOrientedView { render() { // Read some

    data passed to the view const { isSubmitted, buttonText } = this.attrs; if (!isSubmitted && !this.button) { // Form is not yet submitted. Create the button! this.button = new Button({ children: buttonText, color: 'blue' }); this.el.appendChild(this.button.el); } if (this.button) { // The button is visible. Update its text! this.button.attrs.children = buttonText; this.button.render(); } if (isSubmitted && this.button) { // Form was submitted. Destroy the button! this.el.removeChild(this.button.el); this.button.destroy(); } . . .
  11. 20.

    Each component has to keep references to its DOM node

    and to the instances of the children components, and create, update, and destroy them when the time is right.
  12. 23.

    An element is a plain object describing a component instance

    or DOM node and its desired properties.
  13. 24.

    It contains only information about the component type (for example,

    a Button), its properties (for example, its color), and any child elements inside it.
  14. 25.

    An element is not an actual instance. Rather, it is

    a way to tell React: What you want to see on the screen
  15. 26.

    You can’t call any methods on the element. It’s just

    an immutable description object with two fields: type: (string | Component) props: Object.*
  16. 27.

    You can’t call any methods on the element. It’s just

    an immutable description object with two fields: type: (string | Component) props: Object.*
  17. 28.

    When the element’s type is a string, an element represents

    a DOM node with that tag name, and props correspond to its attributes. This is what React will render. For example:
  18. 31.

    By convention, when we want to create an element tree,

    we specify one or more child elements as the children prop of their containing element.
  19. 32.

    What’s important is that both child and parent elements are

    just descriptions and not actual instances
  20. 33.

    They don’t refer to anything on the screen when you

    create them. You can create them and throw them away, and it won’t matter much. really… React-DOM, React-Hardware, React-Native, React-TV […] does it.
  21. 34.

    React Elements are easy to traverse, don’t need to be

    parsed, and of course are much lighter than the actual DOM elements.
  22. 36.

    However, the type of an element can also be a

    function or class corresponding to a React component.
  23. 39.

    An element describing a component is also an element, just

    like an element describing the DOM node. They can be nested and mixed with each other.
  24. 40.

    This feature lets you define a OkButton component as a

    Button with a specific color property value. Without worrying about whether Button renders to a button, a div, or something else entirely.
  25. 41.

    const ConfirmButton = ({ children }) => ({ type: Button,

    props: { color: ‘green', children: children } });
  26. 42.

    const CreateAccount = () => ({ type: 'div', props: {

    children: [{ type: 'p', props: { children: ‘Welcome to Nubank!’ } }, { type: ConfirmButton, props: { children: ‘Yahooo!' } }, { type: Button, props: { color: 'red', children: 'Cancel' } }] });
  27. 43.

    const CreateAccount = () => ( <div> <p>Welcome to Nubank</p>

    <ConfirmButton>Yahooo!</ConfirmButton> <Button color='blue'>Cancel</Button> </div> );
  28. 44.

    When React sees an element with a function or class

    type, it will know to ask that component what element it renders to with the given props.
  29. 48.

    React will repeat this process until it knows the underlying

    DOM tag elements for every component on the page.
  30. 49.

    const Form = ({ isSubmitted, buttonText }) => { if

    (isSubmitted) { // Form submitted! Return a message element. return { type: Message, props: { text: 'Success!' } }; } // Form still visible! Return a button element. return { type: Button, props: { children: buttonText, color: 'blue' } }; };
  31. 50.

    The returned element tree can contain both elements describing DOM

    nodes, and elements describing other components. This lets you compose independent parts of UI without relying on their internal DOM structure.
  32. 52.

    We describe them with elements we return from the components,

    and React takes care of managing the instances.
  33. 53.

    In the last code, Form, Message, and Button are React

    components. They can either be written as functions, as above, or as classes descending from React.Component:
  34. 54.

    class Button extends React.Component { render() { const { children,

    color } = this.props; // Return an element describing a // <button><b>{children}</b></button> return { type: 'button', props: { className: 'button button-' + color, children: { type: 'b', props: { children: children } } } }; } }
  35. 55.

    When a component is defined as a class, it is

    a little more powerful than a functional component. It can store some local state and perform custom logic when the corresponding DOM node is created or destroyed.
  36. 56.

    A functional component is less powerful but is simpler, and

    it acts like a class component with just a single render() method.
  37. 57.

    However, whether functions or classes, fundamentally they are all components

    to React. They take the props as their input, and return the elements as their output.
  38. 59.

    At the end of this process React knows the result

    DOM tree, and a renderer like ReactDOM or React Native applies the minimal set of changes necessary to update the actual DOM nodes.
  39. 62.

    React provides a declarative API so that you don’t have

    to worry about exactly what changes on every update.
  40. 63.

    Tl;dr;
 
 React’s “diffing” algorithm so that component updates are

    predictable while being fast enough for high- performance apps.
  41. 64.
  42. 71.

    2. The developer can hint at which child elements may

    be stable across different renders with a key prop.
  43. 73.

    Going from <a> to <img>, or from <Article> to <Comment>,

    or from <Button> to <div> - any of those will lead to a full rebuild.
  44. 75.

    Component instances receive componentWillUnmount(). When building up a new tree,

    new DOM nodes are inserted into the DOM. Component instances receive componentWillMount() and then componentDidMount(). Any state associated with the old tree is lost.
  45. 76.

    Component instances receive componentWillUnmount(). When building up a new tree,

    new DOM nodes are inserted into the DOM. Component instances receive componentWillMount() and then componentDidMount(). Any state associated with the old tree is lost.
  46. 79.

    React looks at the attributes of both, keeps the same

    underlying DOM node, and only updates the changed attributes
  47. 82.

    By default, when recursing on the children of a DOM

    node, React just iterates over both lists of children at the same time and generates a mutation whenever there’s a difference.
  48. 84.
  49. 87.
  50. 89.

    When children have keys, React uses the key to match

    children in the original tree with children in the subsequent tree.
  51. 91.

    Now React knows that the element with key '9' is

    the new one, and the elements with the keys '10' and '20' have just moved.
  52. 93.
  53. 94.

    Keys should be stable, predictable, and unique. Unstable keys (like

    those produced by Math.random()) will cause many component instances and DOM nodes to be unnecessarily recreated.
  54. 97.
  55. 98.

    React provides a declarative API so that you don’t have

    to worry about exactly what changes on every update.
  56. 101.