React原理学习

最新推荐文章于 2023-01-05 15:13:33 发布

泊一

最新推荐文章于 2023-01-05 15:13:33 发布

阅读量199

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/w_D_lufei/article/details/104093572

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

一、 `setState()`说明
二、 JSX语法的转化过程
三、组件更新机制
四、组件性能优化
- 4.1 减轻state
- 4.2 避免不必要的重新渲染
五、纯组件
- 5.1 作用以及使用
- 5.2 实现原理
六、虚拟DOM和Diff算法
小结

一、 `setState()`说明

1.1 更新数据

setState()更新数据是异步的
注意：使用该语法，后面的setState不要依赖前面setState的值
多次调用setState，只会触发一次render

1.2 推荐语法

推荐：使用 setState((state,props) => {}) 语法
参数state：表示最新的state
参数props：表示最新的props

虽然执行起来还是异步的,但多次调用setState会再次更新state里的数据

this.setState((state, props) => {
   return {
		count:state.count + 1
	}
})

1.3 第二个参数

场景：在状态更新(页面完成重新渲染)后立即执行某个操作
语法：setState(update[,callback])

	this.setState(
	(state, props) => {},
	()=> { console.log('这个回调函数会在状态更新后立即执行') }
 )

二、 JSX语法的转化过程

JSX仅仅是createElement() 方法的语法糖(简化语法)
JSX语法被 @babel/preset-react 插件编译为createElement() 方法
React 元素：是一个对象，用来描述你希望在屏幕上看到的内容

三、组件更新机制

setState() 的两个作用
- 修改state
- 更新组件
过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）

在这里插入图片描述

四、组件性能优化

4.1 减轻state

减轻state：只存储跟组件渲染相关的数据（比如：count/ 列表数据 /loading等）
注意：不用做渲染的数据不要放在state中
对于这种需要在多个方法中用到的数据，应该放到this中

class Counter extends React.Component {
  componentDidMount() {
    // 开启定时器
    this.timerID = setInterval(() => {
      console.log('定时器运行中')
    }, 500)
  }
  render() {
    console.warn('子组件render函数')
    return <h1>当前数字为：{this.props.count}</h1>
  }
  componentWillUnmount() {
    console.warn('componentWillUnmount钩子函数被执行')
    // 清除定时器
    clearInterval(this.timerID)
  }
}

4.2 避免不必要的重新渲染

组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
问题：子组件没有任何变化时也会重新渲染
如果避免不必要的重新渲染？
解决方式：使用钩子函数shouldComponentUpdate(nextProps, nextState)
- 在这个函数中，nextProps和nextState是最新的状态以及属性,this.props和this.state是当前状态以及属性
作用：这个函数有返回值，如果返回true，代表需要重新渲染，如果返回false，代表不需要重新渲染
触发时机：更新阶段的钩子函数，组件重新渲染前执行(shouldComponentUpdate => render)

class App extends React.Component {
	shouldComponentUpdate(nextProps, nextState) {
		// 根据条件，决定是否重新渲染
		// return nextProps.count !== this.props.count
		return false
	}
	render() {...}
}

五、纯组件

5.1 作用以及使用

纯组件： PureComponent 与 React.Component 功能相似
区别： PureComponent 内部自动实现了 shouldComponentUpdate钩子，不需要手动比较
原理：纯组件内部通过分别比对前后两次 props和state的值，来决定是否重新渲染组件

class App extends React.PureComponent {
	render() {
	  	return (
			<div>纯组件</div>
		)
	}
}

5.2 实现原理

说明：纯组件内部的对比是 shallow compare（浅层对比）
对于值类型来说：比较两个值是否相同

let number = 10
let newNumber = number
newNumber = 11
console.log(number === newNumber) // false

引用类型：只比对对象的引用地址是否相同

let obj = { number: 10 }
let newObj = obj
newObj.number = 11
console.log(obj === newObj) // true

注意：state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据

// 创建新数据
let newObj = {...state.obj, number:20 }
this.setState({ obj: newObj })

// 不要用数组的push/unshift 等直接修改当前数组的方法
// 而应该用 concat、slice 等这些返回新数组的方法,扩展运算符也行
this.setState({
	list: [...this.state.list, {新数据}]
})