react 的虚拟dom

Posted 2020-12-30 yunshangwuyou

js、jsx文件引入react:import React,{Component} from ‘react‘
js、jsx文件引入css:impot ‘./One.css‘

import React, {Component} from ‘react‘//js、jsx文件引入react

import ‘./One.css‘ //js、jsx文件引入css:

class One extends Component{

render(){

console.log(‘one render‘);

return (

<div className="image">

<img src={this.props.path} alt=""/>

</div>

)

}

shouldComponentUpdate(){

console.log(‘one shouldComponentUpdate‘);

return false;//

}

/*react性能优化非常重要的一环。组件接受新的state或者props时调用，

我们可以设置在此对比前后两个props和state是否相同，

如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，

这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，

尤其是在dom结构复杂的时候 */

}

export default One; //输出One函数

react diff算法：前往..