<!-- 1. JSX 语法的转化过程 -->
JSX 仅仅是 createElement() 方法的语法糖（简化语法）
JSX 语法被 @babel/preset-react 插件编译为 createElement() 方法
React 元素：是一个对象，用来描述你希望在屏幕上看到的内容
JSX 语法 createElement() React 元素
<!-- 2.组件更新机制 -->
setState() 的两个作用： 1. 修改 state 2. 更新组件（UI）
过程：父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）
<!-- 组件性能优化 -->
<!-- 3. 减轻 state -->
减轻 state：只存储跟组件渲染相关的数据（比如：count / 列表数据 / loading 等）
注意：不用做渲染的数据不要放在 state 中，比如定时器 id等
对于这种需要在多个方法中用到的数据，应该放在 this 中
class Hello extends Component {
componentDidMount() {
// timerId存储到this中，而不是state中
this.timerId = setInterval(() => {}, 2000)
}
componentWillUnmount() {
clearInterval(this.timerId)
}
render() { … }
}
<!-- 4.避免不必要的重新渲染 -->
组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
问题：子组件没有任何变化时也会重新渲染
如何避免不必要的重新渲染呢？
解决方式：使用钩子函数 shouldComponentUpdate(nextProps, nextState)
作用：通过返回值决定该组件是否重新渲染，返回 true 表示重新渲染，false 表示不重新渲染
触发时机：更新阶段的钩子函数，组件重新渲染前执行 （shouldComponentUpdate render）
<!-- 利用nextState参数来判断当前组件是否需要更新 -->
// 生成随机数
class App extends React.Component {
state = {
number: 0
}
handleClick = () => {
this.setState(() => {
return {
number: Math.floor(Math.random() * 3)
}
})
}
// 因为两次生成的随机数可能相同，如果相同，此时，不需要重新渲染
shouldComponentUpdate(nextProps, nextState) {
console.log('最新状态：', nextState, ', 当前状态：', this.state)
return nextState.number !== this.state.number
}
render() {
console.log('render')
return (
<div>
<h1>随机数：{this.state.number}</h1>
<button onClick={this.handleClick}>重新生成</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
<!-- 利用props参数来判断是否需要进行更新 -->
class App extends React.Component {
state = {
number: 0
}
// 点击事件，每次点击生成一个随机数
hanldeBtn = () => {
this.setState({
number: Math.floor(Math.random() * 3)
})
}
render() {
return (
<div>
<NumberBox number={this.state.number} />
<button onClick={this.hanldeBtn}>生成随机数</button>
</div>
)
}
}
class NumberBox extends React.Component {
// 将要更新UI的时候会执行这个钩子函数
shouldComponentUpdate(nextProps, nextState) {
// 判断一下当前生成的 值是否与页面的值相等
if (nextProps.number !== this.props.number) {
return true
}
return false
}
render() {
return (
<h1>随机数：{this.props.number} </h1>
)
}
}
<!-- 5. 纯组件 -->
纯组件：PureComponent 与 React.Component 功能相似
区别：PureComponent 内部自动实现了 shouldComponentUpdate 钩子，不需要手动比较
原理：纯组件内部通过分别 对比 前后两次 props 和 state 的值，来决定是否重新渲染组件
说明：纯组件内部的对比是 shallow compare（浅层对比）
对于值类型来说：比较两个值是否相同（直接赋值即可，没有坑）
// 生成随机数
class App extends React.PureComponent {
state = {
number: 0
}
handleClick = () => {
this.setState(() => {
return {
number: Math.floor(Math.random() * 3)
}
})
}
render() {
console.log('父组件中的render')
return (
<div>
<h1>随机数：{this.state.number}</h1>
<button onClick={this.handleClick}>重新生成</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
<!-- 引用类型 -->
说明：纯组件内部的对比是 shallow compare（浅层对比）
对于引用类型来说：只比较对象的引用（地址）是否相同
注意：state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据！
// 引用类型：
const obj = { number: 0 }
const newObj = obj
newObj.number = 2
console.log(newObj === obj) // true
// 生成随机数
class App extends React.PureComponent {
state = {
obj: {
number: 0
}
}
handleClick = () => {
// 正确做法：创建新对象
const newObj = { ...this.state.obj, number: Math.floor(Math.random() * 3) } //新建地址就不同
this.setState(() => {
return {
obj: newObj
}
})
// 错误演示：直接修改原始对象中属性的值
/* const newObj = this.state.obj
newObj.number = Math.floor(Math.random() * 3) //直接修改原始数据导致不能重新渲染,引用类型：只比对对象的引用地址是否相同,修改导致地址相同
this.setState(() => {
return {
obj: newObj
}
}) */
}
render() {
console.log('父组件重新render')
return (
<div>
<h1>随机数：{this.state.obj.number}</h1>
<button onClick={this.handleClick}>重新生成</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
<!-- 6.虚拟 DOM 和 Diff 算法 -->
虚拟 DOM：本质上就是一个 JS 对象，用来描述你希望在屏幕上看到的内容（UI）。
执行过程
1. 初次渲染时，React 会根据初始state（Model），创建一个虚拟 DOM 对象（树）。
2. 根据虚拟 DOM 生成真正的 DOM，渲染到页面中。
3. 当数据变化后（setState()），重新根据新的数据，创建新的虚拟DOM对象（树）。
4. 与上一次得到的虚拟 DOM 对象，使用 Diff 算法 对比（找不同），得到需要更新的内容。
5. 最终，React 只将变化的内容更新（patch）到 DOM 中，重新渲染到页面。
<!-- 7.React 原理揭秘 -->
1. 工作角度：应用第一，原理第二。
2. 原理有助于更好地理解 React 的自身运行机制。
3. setState()异步更新数据。
4. 父组件更新导致子组件更新，纯组件提升性能。
5. 思路清晰简单为前提，虚拟 DOM 和 Diff 保效率。
6. 虚拟 DOM state + JSX。
7. 虚拟 DOM 的真正价值从来都不是性能。