Skip to content

Latest commit

 

History

History
75 lines (43 loc) · 3.44 KB

301-02.md

File metadata and controls

75 lines (43 loc) · 3.44 KB

Home

React

reactjs.org

State and Lifecycle

State is similar to props, but it's private and fully controlled by the component.

Converting a Function to a Class

You can convert a function component to a class in five steps:

  1. Create an ES6 class, with the same name, that extends React.Component.
  2. Add a single empty method to it called render().
  3. Move the body of the function into the render() method.
  4. Replace props with this.props in the render() body.
  5. Delete the remaining empty function declaration.

Adding Lifecycle Methods to a Class

A React component's lifecycle contains phases for creation and deletion. These are called mounting and unmounting. These can be thought of as "setup" and "cleanup".

We can declare special methods on the component class to run some code when a component mounts and unmounts. These methods are called "lifecycle methods."

Using State Correctly

Three things you should know about setState()

  1. Don't modift state directly
  2. State Updates May Be Asynchronous
  3. State Updates are Merged

Handling Events

Handling events in React is similar to handling events on the DOM, although there are some syntax differences:

  1. React events are named using camelCase
  2. With JSX you pass a function as the event handler, rather than a string.

You also cannot return false to prevent default behavior in React- you must call preventDefault explicitly.

When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead- provide a listener when the element is initially rendered.

Passing Arguments to Event Handlers

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

The above two lines are equivalent, and use arrow functions and Function.prototype.bind respectively.

In both cases, the e argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with bind any further arguments are automatically forwarded.

Conditional Rendering

You can render React components that hold the behavior you need distinctively- meaning you can render only some, depending on the state of the application. Conditional rendering works much the same way as in JavaScript- using operators like if or the conditional operator to create elements representing the current state.

Element Variables

You can use variables to store elements, which will help conditionally render a part of the component without changing the rest of the output.

Inline If with Local && Operator

You can embed expressions in JSX by wrapping them in {}. Including JavaScript logical && Operator- useful for conditionally including an element.

Inline If-Else with Conditional Operator

Another method for conditionally rendering elements inline is to use the JavaScript conditional operator condition ? true : false.

It is up to you to choose an appropriate style based on what you and your team consider more readable. Keep in mind, whenever conditions become too complex, it might be a good time to extract a component.

Preventing Component from Rendering

If you ever wanted a component to hide itself even though it was rendered by another component. Return null, instead of its render output.

Home