2 Understanding React

 

This chapter covers

  • How state works and why it’s important
  • How properties work and why they’re important
  • Understanding the React component specification
  • Implementing React lifecycle methods

Now that we’ve gone over the basics, it’s time to dive into some other fundamental pieces that make up React and React Native. We’ll discuss how to manage state and data, and how data is passed through an application. We’ll also dive deeper by demonstrating how to pass properties (props) between components and how to manipulate these props from the top down.

After you’re equipped with knowledge about state and props, we’ll go deeper into how to use the built-in React lifecycle methods. These methods allow you to perform certain actions when a component is created or destroyed. Understanding them is key to understanding how React and React Native work and how to take full advantage of the framework. The lifecycle methods are also conceptually the biggest part of React and React Native.

Note

You’ll see both React and React Native referenced in this chapter. Keep in mind that when I mention React, I’m talking not about things that are specific to React Native, but concepts that are related to both React and React Native. For example, state and props work the same in both React and React Native, as do the React lifecycle and the React component specifications.

2.1 Managing component data using state

2.1.1 Correctly manipulating component state

2.2 Managing component data using props

2.3 React component specifications

2.3.1 Using the render method to create a UI

2.3.2 Using property initializers and constructors

2.4 React lifecycle methods

2.4.1 The static getDerivedStateFromProps method

2.4.2 The componentDidMount lifecycle method

2.4.3 The shouldComponentUpdate lifecycle method

2.4.4 The componentDidUpdate lifecycle method

2.4.5 The componentWillUnmount lifecycle method

Summary