什么是React原理

本篇內(nèi)容主要講解“什么是React原理”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“什么是React原理”吧!

目錄

• 1.setState() 說明

• 1.1 更新數(shù)據(jù)

• 1.2 推薦語法

• 1.3 第二個(gè)參數(shù)

• 2.JSX 語法的轉(zhuǎn)化過程

• 3.組件更新機(jī)制

• 4.組件性能優(yōu)化

• 4.1 減輕 state

• 4.2 避免不必要的重新渲染

1.setState() 說明

1.1 更新數(shù)據(jù)

setState() 是異步更新數(shù)據(jù)

可以多次調(diào)用 setState() ,只會(huì)觸發(fā)一次重新渲染

import React from 'react'
import ReactDOM from 'react-dom'
class Opp extends React.Component {
	state = {
		count: 1,
	}
	handleClick = () => {
		// 異步更新數(shù)據(jù)
		this.setState({
			count: this.state.count + 1,
		})
        this.setState({
			count: this.state.count + 1,
		})
		console.log(this.state.count) // 1
	}
	render() {
		return (
			<div>
				<h2>計(jì)數(shù)器：{this.state.count}</h2>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

1.2 推薦語法

使用 setState((state,props)=>{}) 語法

state:表示最新的 state, props:表示最新的 props

import React from 'react'
import ReactDOM from 'react-dom'
class Opp extends React.Component {
	state = {
		count: 1,
	}
	handleClick = () => {
		/* // 異步更新數(shù)據(jù)
		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
    */
		// 推薦語法
		this.setState((state, props) => {
			return {
				count: state.count + 1,
			}
		})
		this.setState((state, props) => {
			console.log('第二次調(diào)用：', state) //2
			return {
				count: state.count + 1,
			}
		})
		console.log(this.state.count) // 3
	}
	render() {
		return (
			<div>
				<h2>計(jì)數(shù)器：{this.state.count}</h2>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

1.3 第二個(gè)參數(shù)

• 在狀態(tài)更新（頁(yè)面完成重新渲染）后立即執(zhí)行某個(gè)操作

• 語法：setState(updater[,callback])

callback 是指回調(diào)函數(shù) 可加可不加

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,
				}
			},
			// 狀態(tài)更新后并且重新渲染后，立即執(zhí)行
			() => {
				console.log('狀態(tài)更新完成：', this.state.count) // 2
				console.log(document.getElementById('title').innerText) // 計(jì)數(shù)器：2
				document.title = '更新后的 count 為：' + this.state.count
			}
		)
		console.log(this.state.count) //1
	}
	render() {
		return (
			<div>
				<h2 id='title'>計(jì)數(shù)器：{this.state.count}</h2>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

2.JSX 語法的轉(zhuǎn)化過程

• JSX 僅僅是 createElement() 方法的語法糖（簡(jiǎn)化語法）

• JSX 語法被 @babel/preset-react 插件編譯為 createElement() 方法

• React元素：是一個(gè)對(duì)象，用來描述你希望在屏幕上看到的內(nèi)容

import React from 'react'
import ReactDOM from 'react-dom'
// JSX 語法的轉(zhuǎn)化過程
// const element = <h2 className='greeting'>Hello JSX</h2>
const element = React.createElement(
	'h2',
	{
		className: 'greeting',
	},
	'Hello JSX'
)
console.log(element)
ReactDOM.render(element, document.getElementById('root'))

3.組件更新機(jī)制

• setState() 的兩個(gè)作用：1.修改 state 2.更新組件（UI）

• 過程：父組件重新渲染是，也會(huì)重新渲染子組件，但只會(huì)渲染當(dāng)前組件子樹（當(dāng)前組件及其所有子組件）

4.組件性能優(yōu)化

4.1 減輕 state

• 減輕 state ：只存儲(chǔ)跟組件渲染相關(guān)的數(shù)據(jù)（比如：count /列表數(shù)據(jù)/ loading 等）

• 注意：不用渲染的書籍不要放在 state 中（比如定時(shí)器 id 等）

• 需要在多個(gè)方法中用到的數(shù)據(jù)，應(yīng)該放在 this 中

4.2 避免不必要的重新渲染

• 組件更新機(jī)制：父組件更新會(huì)引起子組件也被更新

• 問題：子組件沒有變化時(shí)也會(huì)被重新渲染，造成不必要的重新渲染

• 解決方式：使用鉤子函數(shù)shouldComponentUpdate(nextProps,nextState)

• 作用：通過返回值決定該組件是否重新渲染，返回 true 表示重新渲染， false 表示不重新渲染

• 觸發(fā)時(shí)機(jī)：更新階段的鉤子函數(shù)，組件重新渲染前執(zhí)行（shouldComponentUpdate -> render)

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,
			}
		})
	}
	// 鉤子函數(shù)
	shouldComponentUpdate(nextProps, nextState) {
		// 返回 false,阻止組件重新渲染
		// return false
		// 最新的狀態(tài)
		console.log('最新的state', nextState)
		// 更新前的狀態(tài)
		console.log(this.state)
		// 返回 true,組件重新渲染
		return true
	}
	render() {
		console.log('組件更新了')
		return (
			<div>
				<h2>計(jì)數(shù)器：{this.state.count}</h2>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

案例：隨機(jī)數(shù)

通過 nextState

import React from 'react'
import ReactDOM from 'react-dom'
// 生成隨機(jī)數(shù)
class Opp extends React.Component {
	state = {
		number: 0,
	}
	handleClick = () => {
		this.setState((state) => {
			return {
				number: Math.floor(Math.random() * 3),
			}
		})
	}
	// 兩次生成的隨機(jī)數(shù)可能相同，則沒必要重新渲染
	shouldComponentUpdate(nextState) {
		console.log('最新狀態(tài)：', nextState, '當(dāng)前狀態(tài)：', this.state)
		return nextState.number !== this.state.number
		/* if ( nextState.number ！== this.state.number) {
			return true
		}
		return false*/
	}
	render() {
		console.log('render')
		return (
			<div>
				<h2>隨機(jī)數(shù)：{this.state.number}</h2>
				<button onClick={this.handleClick}>重新生成</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

通過 nextState

import React from 'react'
import ReactDOM from 'react-dom'
// 生成隨機(jī)數(shù)
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}>重新生成</button>
			</div>
		)
	}
}
class NumberBox extends React.Component {
	shouldComponentUpdate(nextProps) {
		console.log('最新props：', nextProps, '當(dāng)前props：', this.props)
		return nextProps.number !== this.props.number
	}
	render() {
		console.log('子組件render')
		return <h2>隨機(jī)數(shù)：{this.props.number}</h2>
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

到此，相信大家對(duì)“什么是React原理”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！