前言:
今天大家对“获取dom class”大概比较看重,同学们都需要分析一些“获取dom class”的相关资讯。那么小编也在网络上汇集了一些对于“获取dom class””的相关资讯,希望姐妹们能喜欢,兄弟们一起来学习一下吧!react的好太多了,明显的优势:在稳定性和创新性之间做了很好的平衡,使用户比较容易适应;
灵活性和响应性:React提供最大的灵活性和响应能力。虚拟DOM:由于它基于文档对象模型,因此它允许浏览器友好地以HTML,XHTML或XML格式排列文档。可扩展性:由于其灵活的结构和可扩展性,React已被证明对大型应用程序更好。不断发展: React得到了Facebook专业开发人员的支持,他们不断寻找改进方法致力于使其更先进。丰富的JavaScript库:来自世界各地的贡献者正在努力添加更多功能。Web或移动平台: React提供React Native平台,可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。React原理揭秘,相信看完你会有更进一步的理解。一、组件更新机制setState() 的两个作用修改state更新组件过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件)
组件性能优化
减轻state
减轻state:只存储跟组件渲染相关的数据(比如:count/ 列表数据 /loading等)注意:不用做渲染的数据不要放在state中对于这种需要在多个方法中用到的数据,应该放到this中
避免不必要的重新渲染组件更新机制:父组件更新会引起子组件也被更新,这种思路很清晰问题:子组件没有任何变化时也会重新渲染如果避免不必要的重新渲染?解决方式:使用钩子函数 shouldComponentUpdate(nextProps, nextState)在这个函数中,nextProps和nextState是最新的状态以及属性
作用:这个函数有返回值,如果返回true,代表需要重新渲染,如果返回false,代表不需要重新渲染触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate => render)
随机数案例
需求:随机生成数字,显示在页面,如果生成的数字与当前显示的数字相同,那么就不需要更新UI,反之更新UI。
利用nextState参数来判断当前组件是否需要更新
class App extends React.Component { state = { number: 0 } // 点击事件,每次点击生成一个随机数 hanldeBtn = () => { this.setState({ number: Math.floor(Math.random() * 3) }) } // 将要更新UI的时候会执行这个钩子函数 shouldComponentUpdate(nextProps,nextState) { // 判断一下当前生成的 值是否与页面的值相等 if(nextState.number !== this.state.number){ return true } return false } render() { return ( <div> 随机数:{this.state.number} <br /> <button onClick={this.hanldeBtn}>生成随机数</button> </div> ) }}
利用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> ) }}纯组件
作用以及使用
纯组件: PureComponent 与 React.Component 功能相似区别: PureComponent 内部自动实现了 shouldComponentUpdate钩子,不需要手动比较原理:纯组件内部通过分别比对前后两次 props和state的值,来决定是否重新渲染组件
实现原理
说明:纯组件内部的对比是 shallow compare(浅层对比)对于值类型来说:比较两个值是否相同
引用类型:只比对对象的引用地址是否相同
注意:state 或 props 中属性值为引用类型时,应该创建新数据,不要直接修改原数据
虚拟DOM和Diff算法React更新视图的思想是:只要state变化就重新渲染视图特点:思路非常清晰问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染吗? 不是这样的理想状态:部分更新,只更新变化的地方React运用的核心点就是 虚拟DOM 配合 Diff 算法
虚拟DOM
本质上就是一个JS对象,用来描述你希望在屏幕上看到的内容
Diff算法
执行过程
初次渲染时,React会根据初始化的state(model),创建一个虚拟DOM对象(树)根据虚拟DOM生成真正的DOM,渲染到页面当数据变化后(setState()),会重新根据新的数据,创建新的虚拟DOM对象(树)与上一次得到的虚拟DOM对象,使用Diff算法比对(找不同),得到需要更新的内容最终,React只将变化的内容更新(patch)到DOM中,重新渲染到页面
代码演示
组件render()调用后,根据状态和JSX结构生成虚拟DOM对象(render()方法的调用并不意味着浏览器进行渲染,render方法调用时意味着Diff算法开始比对了)示例中,只更新p元素的文本节点内容初次渲染的DOM对象
数据更新之后的虚拟DOM对象
总结
工作角度:应用第一,原理第二原理有助于更好的理解React的自身运行机制setState() 异步更新数据父组件更新导致子组件更新,纯组件提升性能思路清晰简单为前提,虚拟DOM和Diff保效率(渲染变化的组件)虚拟DOM -> state + JSX虚拟DOM最大的特点是 脱离了浏览器的束缚,也就是意味着只要是能支持js的地方都可以用到react,所以为什么说react是可以进行跨平台的开发
视频内容:
前端React精品教程