59 lines
1.9 KiB
Markdown
59 lines
1.9 KiB
Markdown
jsx语法->createElement()->React元素
|
|
父组件更新,子组件跟着更新.
|
|
# 组件优化
|
|
### 减轻state,与渲染无关的不要放在state中.
|
|
### 避免不必要的重新渲染.
|
|
钩子函数 shouldComponentUpdate(nextProps,nextState)
|
|
根据返回值判断是否需要渲染该值.
|
|
触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate->render)
|
|
或者使用纯组件
|
|
```html
|
|
class StateApp extends React.Component{
|
|
constructor(){
|
|
super()
|
|
this.state= {
|
|
count:0
|
|
}
|
|
}
|
|
shouldComponentUpdate(nextProps,nextState){
|
|
console.info('最新是内容'+nextState.count)
|
|
console.info('上次是内容'+this.state.count)
|
|
return nextState.count!==this.setState.count
|
|
}
|
|
onIncrement=()=>{
|
|
console.info('事件处理this'+this)
|
|
this.setState((state,props)=> {
|
|
return {
|
|
count:state.count+1
|
|
}
|
|
})
|
|
console.info(this.state.count)
|
|
}
|
|
render(){
|
|
return (
|
|
<div>有状态组件,{this.state.count}
|
|
<button onClick={this.onIncrement}>+1</button>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
```
|
|
|
|
## 纯组件 PureComponent
|
|
比较props和state,只有这两者变化才会更新.
|
|
纯组件内部的对比是shallow compare 浅层对比
|
|
对于引用类型来说:只比较对象地址.
|
|
# 虚拟DOM和Diff算法
|
|
虚拟DOM=state+jsx
|
|
虚拟DOM:本质上就是一个js对象,用来描述你希望在屏幕上看到的内容(UI)
|
|
虚拟DOM让react脱离了浏览器的束缚
|
|
## diff算法
|
|
1. 初次渲染是,React会根据初始state(Model),创建一个虚拟DOM对象(树)
|
|
2. 根据虚拟DOM生成真正的DOM,渲染到页面中
|
|
3. 当数据变化后(setState),重新根据新的数据,创建新的虚拟DOM对象树
|
|
4. 与上一次得到的虚拟DOM对象,使用Diff算法对比(找不同),得到需要更新的内容
|
|
5. 最终,React只将变化的内容(patch)到DOM中,重新渲染到页面.
|
|
|
|
|
|
|