科技部网站,北京建网站多少钱,长安公司网站制作,蓝众建站_专业网站建设导语
React中的核心概念 1 虚拟DOM#xff08;Virtual DOM#xff09; 2 Diff算法#xff08;虚拟DOM的加速器#xff0c;提升React性能的法宝#xff09;
React主要的原理 Virtual DOM 虚拟DOM;
提供了一种不同的而又强大的方式来更新DOM#xff0c; 代替直接的DOM操…导语
React中的核心概念 1 虚拟DOMVirtual DOM 2 Diff算法虚拟DOM的加速器提升React性能的法宝
React主要的原理 Virtual DOM 虚拟DOM;
提供了一种不同的而又强大的方式来更新DOM 代替直接的DOM操作。 就是Virtual DOM, 一个轻量级的虚拟的DOM; 通过这个Virtual DOM去更新真实的DOM 由这个Virtual DOM管理真实DOM的更新 我想问的是为什么通过这多一层的Virtual DOM操作就能更快呢 diff算法。 React会等到事件循环结束然后利用这个diff算法 通过当前新的dom表述与之前的作比较 计算出最小的步骤更新真实的DOM virtual dom----diff----real dom 之前我的想法是dom树是元素组成的;但是在react里面就是 Components 组件 在DOM树上的节点被称为元素在这里则不同Virtual DOM上称为commponent。 Virtual DOM的节点就是一个完整抽象的组件它是由commponents组成。
Components存在让diff算法更加高效
如何呈现真实的DOM如何渲染组件什么时候渲染怎么同步更新的 1state,render; 当数据发生变化时将会调用Render重现渲染这里只能通过提供的setState方法更新数据。 setState({})更新数据;
React不是一个MVC框架它是构建易于可重复调用的web组件侧重于UI, 也就是view层 其次React是单向的从数据到视图的渲染非双向数据绑定这个是很重点的问题不直接操作DOM对象而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。不便于直接操作DOM大多数时间只是对 virtual DOM 进行编程
https://120.24.108.143/svn/GAMC/DevCode/MD_Dialog_XML/xml
React将DOM抽象为虚拟DOM 虚拟DOM其实就是用一个对象来描述DOM 通过对比前后两个对象的差异 最终只把变化的部分重新渲染提高渲染的效率
为什么用虚拟dom 当dom发生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大 https://segmentfault.com/a/1190000012921279 https://zhuanlan.zhihu.com/p/20346379 React 源码剖析系列 不可思议的 react diff知其然更要知其所以然
JSX的注意点 注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
类似label 的 for属性使用htmlFor代替 注意 2在 JSX 中可以直接使用 JS代码直接在 JSX 中通过 {} 中间写 JS代码即可 注意 3在 JSX 中只能使用表达式但是不能出现 语句 注意 4在 JSX 中注释语法{/* 中间是注释的内容 */}
React创建组件的两种方式 1 通过 JS函数 创建无状态组件 2 通过 class 创建有状态组件 函数式组件 和 class 组件的使用场景说明 1 如果一个组件仅仅是为了展示数据那么此时就可以使用 函数组件 2 如果一个组件中有一定业务逻辑需要操作数据那么就需要使用 class 创建组件因为此时需要使用 state JavaScript函数创建注意1 函数名称必须为大写字母开头React通过这个特点来判断是不是一个组件 注意2 函数必须有返回值返回值可以是JSX对象或null 注意3 返回的JSX必须有一个根元素 注意4 组件的返回值使用()包裹避免换行问题 function Welcome(props) { return ( // 此处注释的写法 div classNameshopping-list {/* 此处 注释的写法 必须要{}包裹 */} h1Shopping List for {props.name}/h1 ul liInstagram/li liWhatsApp/li /ul /div ) }ReactDOM.render( Welcome namejack /, document.getElementById(app) ) // class创建的组件中 必须有rander方法 且显示return一个react对象或者null class ShoppingList extends React.Component { constructor(props) { super(props) } // class创建的组件中 必须有rander方法 且显示return一个react对象或者null render() { return ( div classNameshopping-list h1Shopping List for {this.props.name}/h1 ul liInstagram/li liWhatsApp/li /ul /div ) } }
props是只读的无法给props添加或修改属性 class Welcome extends React.Component { constructor(props) { super(props) } render() { return h1Hello, {this.props.name}/h1 } }
