React Principles Explained

import React from 'react'
import ReactDOM from 'react-dom'
class Opp extends React.Component {
	state = {
		count: 1,
	}
	handleClick = () => {
		// Asynchronously update data this.setState({
			count: this.state.count + 1,
		})
        this.setState({
			count: this.state.count + 1,
		})
		console.log(this.state.count) // 1
	}
	render() {
		return (
			<div>
				<h1>Counter: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'
class Opp extends React.Component {
	state = {
		count: 1,
	}
	handleClick = () => {
		/* // Asynchronously update data this.setState({
			count: this.state.count + 1,
		})
		console.log(this.state.count) //1
    this.setState({
			count: this.state.count + 1,
		})
		console.log(this.state.count) //1
    */
		// Recommended syntax this.setState((state, props) => {
			return {
				count: state.count + 1,
			}
		})
		this.setState((state, props) => {
			console.log('Second call:', state) //2
			return {
				count: state.count + 1,
			}
		})
		console.log(this.state.count) // 3
	}
	render() {
		return (
			<div>
				<h1>Counter: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'
class Opp extends React.Component {
	state = {
		count: 1,
	}
	handleClick = () => {
		this.setState(
			(state, props) => {
				return {
					count: state.count + 1,
				}
			},
			// Execute immediately after the state is updated and re-rendered () => {
				console.log('Status update completed:', this.state.count) // 2
				console.log(document.getElementById('title').innerText) // Counter: 2
				document.title = 'Updated count is:' + this.state.count
			}
		)
		console.log(this.state.count) //1
	}
	render() {
		return (
			<div>
				<h1 id='title'>Counter: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'
//Conversion process of JSX syntax// const element = <h1 className='greeting'>Hello JSX</h1>
const element = React.createElement(
	'h1',
	{
		className: 'greeting',
	},
	'Hello JSX'
)
console.log(element)
ReactDOM.render(element, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'
class Opp extends React.Component {
	state = {
		count: 0,
	}
	handleClick = () => {
		this.setState((state) => {
			return {
				count: this.state.count + 1,
			}
		})
	}
	//Hook function shouldComponentUpdate(nextProps, nextState) {
		// Return false to prevent the component from re-rendering // return false
		// The latest state console.log('latest state', nextState)
		// Status before update console.log(this.state)
		// Return true, the component re-renders return true
	}
	render() {
		console.log('Component updated')
		return (
			<div>
				<h1>Counter: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'
// Generate random numbers class Opp extends React.Component {
	state = {
		number: 0,
	}
	handleClick = () => {
		this.setState((state) => {
			return {
				number: Math.floor(Math.random() * 3),
			}
		})
	}
	// The random numbers generated twice may be the same, so there is no need to re-render shouldComponentUpdate(nextState) {
		console.log('Latest state:', nextState, 'Current state:', this.state)
		return nextState.number !== this.state.number
		/* if ( nextState.number !== this.state.number) {
			return true
		}
		return false*/
	}
	render() {
		console.log('render')
		return (
			<div>
				<h1>Random number: {this.state.number}</h1>
				<button onClick={this.handleClick}>Regenerate</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'
// Generate random numbers class Opp extends React.Component {
	state = {
		number: 0,
	}
	handleClick = () => {
		this.setState((state) => {
			return {
				number: Math.floor(Math.random() * 3),
			}
		})
	}
	render() {
		return (
			<div>
				<NumberBox number={this.state.number} />
				<button onClick={this.handleClick}>Regenerate</button>
			</div>
		)
	}
}
class NumberBox extends React.Component {
	shouldComponentUpdate(nextProps) {
		console.log('latest props:', nextProps, 'current props:', this.props)
		return nextProps.number !== this.props.number
	}
	render() {
		console.log('subcomponent render')
		return <h1>Random number: {this.props.number}</h1>
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))