Recently, the React craze. I’ve been getting familiar with ES6 syntax since I started working on React. I’m really fascinated by this framework. Most of the company’s projects are based on VUE and Uniapp. Although the logic of vUE development mode is very clear. Decoupled template styles and JS. But vue has too many rules to remember. Reuse of code can only be done by pulling components out or using mixins. Writing React makes me feel like I’m back in js.

React React React React React React React

React component development

JSX

The environment

Use React to import the following three things:

  • React: The core code for React
  • React-dom: The core code that renders React to the DOM
  • Babel: Used to parse ES6 syntax and JSX syntax

Common development patterns

// Create the React component
class App extends React.Component {
	constructor() {
    	super(props)
        this.state = {}
    }
    
    render() {
    	return (<div>Hello React</div>)}}// Render function
ReactDOM.render(<App />,element)
Copy the code

JSX grammar

JavaScript XML, which allows us to write markup languages in JS. (Note that JSX parsing relies on Babel). Here are some things to be aware of when using JSX

/ / JSX annotations
{/* Write a single line or multiple lines of comment in this */}

// What types can be displayed after parsing and what types cannot be displayed
//1. Types that can be displayed
String
Number
Array
//2. The type that cannot be displayed
Boolean
Null
undefined
//3. Object types cannot be child elements


// An embedded expression that JSX can use
1.Operator expression2.Ternary operator3.Execute a function// For single-tag tags, you must use the/ending, i.e. 
Copy the code

In addition to the small details of JSX usage, here’s how we write tag attributes using JSX

//JSX binds common attributes<h2 title={title}> I am the title </title>//JSX binds the class attribute
<div className={"box title"+ (active ? "active" :"")} >I'm a div element</div>

//JSX binding style
<div style="{{color:"red",fontSize:"18px"}} ">I am a div</div>
Copy the code

JSX binding event in render function

The binding event format is: onClick = {event name}

Various ways to modify this and pros and cons

// Bind events in the render function. This is undefined by default. You need to modify the reference to this in some way to call the function properly

//1. Bind to this
class App extends React.Component {
	constructor() {
		/ /..
    	this.btnClick = this.btnClick.bind(this)}render() {
		return <div onClick={this.btnClick}>doSome</div>
	}
    
    btnClick() { / /.. }
}


//2. The called function is declared as an arrow function
class App extends React.Components {
	/ /..
    render () {
    	return <div onClick={this.btnClick}>doSome</div>
    }
    
    btnClick = () = > { / /.. }
}


//3. The arrow function is used in the JSX expression of the event binding, and the corresponding method is called in the arrow function
class App extends React.Components {
	/ /..
    render () {
    	return <div onClick={ (event) = > { this.btnClick(event,param1,param2) }}>doSome</div>
    }
    
    btnClick(event,param1,param2) { / /.. }
}
Copy the code

The third option is recommended

React conditional rendering

Common conditional rendering methods:

  • Conditional statement

This works well when there is a lot of logical code

/ /..
render() {
	let welcome = null;
    if(true) {
    	welcome = <h2>Welcome back</h2>
    }else {
    	welcome = <h2>Hello, please log in first</h2>
    }
    
    return (
    	<div>
        	{ welcome }
        </div>...)}Copy the code
  • Ternary operator
let { isLogin } = this.state
<h2>{ isLogin ? "Login successful" : null }</h2>
Copy the code
  • Logic and Expression
let { isLogin } = this.state
<h2>{ isLogin && "Login successful"}</h2>
Copy the code

React list rendering

JSX renders the values in the array directly for list rendering. Let’s look at an example

/ /...
const listArray = [List of '1'.List of '2'.List of '3'];

render() {
	return (
    	<div>{ listArray.map( (item,index) => {
        	return <li key={ index} >{ item }</li>})}</div>)}Copy the code

Filter (), array.every (), array.some (), array.slice (), etc.

What the render function can return

The familiar render function can return JSX syntax. You can also return the following

  1. An array or fragments could
  2. Portals
  3. A string or numeric type
  4. Boolean or NULL

The life cycle of the React class component

The life cycle is used to describe a thing from its creation to its destruction. The component lifecycle in React refers to the process from creation to destruction of components that provide different functions. When a component enters a specific period, the corresponding lifecycle functions will be called.

React class components use the following lifecycle:

  1. Mount Completion stage:componentDidMount
  2. Update completion stage:componentDidUpdate
  3. Upcoming unloading stage:componentWillUnmount

Remember a picture

Is setState asynchronous or synchronous in React?

In React, we use setState to update the state of the component and then re-render it, since the page may update its state frequently. To improve performance, setState in React is mostly asynchronous. The value of state after the asynchronous modification can be obtained in the callback function of the second parameter or in the life cycle componentDidUpdate.

Although most of the time setState is asynchronous, there are times when setState is synchronous, for example:

In component declaration cycles or React synthesis events, setState is asynchronous;

In setTimeout or native DOM events, setState is synchronous;

Merge setState data

What setState does is actually merge the new Object with the old state using object.assign ().

Multiple setState operations in a function are really only one operation. Because inside React, multiple set states are handled. Combine the assign operation into one operation so that setState takes effect when we really need it multiple times. We should write:

The first argument to setState can accept a function in addition to an object
//prevState is the value of setState changed last time

this.setState((prevState,props) = >{
	return {
    		counter:prevState.counter + 1}})Copy the code

Why does setState pass immutable data?

In shouldComponentUpdate, we often compare the state before the update with the state after the update. For objects, we compare the address in memory. If the modified state operates on the original object, the comparison will be performed even if the object is modified. They still return true for comparison.