Due to the demands of my work, I started to learn React recently and found it difficult to find appropriate learning materials online, so I came up with the idea of writing React16 Beginner’s On the Road series, mainly to share my own learning process. The series will consist of about 10 chapters and will be written in four months.

Chapter one: Common basic knowledge

It may not be comprehensive to summarize the basic knowledge points that I often use in the process of learning and developing as well as the knowledge points recorded in the process of reading official documents.

component

Components allow you to break up the UI into separate reusable pieces of code and think about each piece individually. Similar in concept to JavaScript functions. It takes an arbitrary input parameter (” props “) and returns a React element that describes what the page displays.

Functional component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
Copy the code

The class components

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Copy the code

Data sources and variations

props

In either a functional or a Class component, it is not allowed to modify its props.

Props come from two sources:

  • defaultProps
  • parent Component

state

State is the mutable state within the component itself.

setState

SetState () queues changes to the component state and tells React that it needs to rerender the component and its children with the updated state.

Think of setState() as a request rather than a command to update the component immediately. React delays calls to it for better performance awareness, and then updates multiple components at once. React does not guarantee that state changes will take effect immediately.

SetState () does not always update components immediately. It delays updates in bulk.

SetState is asynchronous only in synthesized events and hook functions, and synchronous in native events and asynchrony (setTimeout,.then, etc.).

Grammar:

setState(updater, [callback])
Copy the code

Updater: an object or function

Callback: executed after setState has merged and rerendered the components. In general, we recommend using componentDidUpdate() instead.

The life cycle

mount

When a component instance is created and inserted into the DOM, its lifecycle is called in the following order:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

update

Updates are triggered when a component’s props or state changes. Component updates are called in the lifecycle order as follows:

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

uninstall

The following method is called when a component is removed from the DOM:

  • componentWillUnmount()

Error handling

When an error is thrown in a rendering process, lifecycle, or child component’s constructor, the following methods are called:

  • static getDerivedStateFromError()
  • componentDidCatch()

The event processing

This binding

  • The bind:constructorUse bind to bind this
  • Arrow function: Bind this with the arrow function in the callback
  • Public Class fields syntax

Parameter passing

  • Arrow function
  • bind
  • Pass parameters through data-attributes
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
Copy the code

Refs

Refs provides a way to access DOM nodes or React elements created in the Render method.

There are two ways to create it:

  • createRef
  • The callback refs
// createRef class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } // constructor(props) {function (props) {function (props); this.myRef = null } render() { return <div ref={element => this.myRef = element} />; }}Copy the code

Fragments

A common pattern in React is for a component to return multiple elements. Fragments allow you to group sublists without adding additional nodes to the DOM, shorthand for empty tags (<>).