Open haizhilin2013 opened 5 years ago
自上而下的单向数据流
这个问题我感觉可能描述的不全面,先讲一下我的描述吧: 1.单向数据流。React是一个MVVM框架,简单来说是在MVC的模式下在前端部分拆分出数据层和视图层。单向数据流指的是只能由数据层的变化去影响视图层的变化,而不能反过来(除非双向绑定) 2.数据驱动视图。我们无需关注页面的DOM,只需要关注数据即可 3.渲染过程,生命周期…… 4.setState()大部分时候是异步执行的,提升性能。
感觉可以从以下几个方面回答: 1、元素渲染、更新(这块可以从JSX解析,diff算法来谈); 2、生命周期 3、props、state更新
从一个完整的流程来说:首先编写的jsx会被转换执行返回node对象,node对象就可以理解为是虚拟dom,渲染时都会将老的虚拟dom和新的虚拟dom来进行比对,比对的过程中就涉及到了diff算法,只比较同一层的节点,节点tag不同,就不再比较,以新的节点为准,节点相同就比较key,key不同也会以新节点为准;之后就将最终的虚拟dom,再渲染在浏览器中;props,state的更新也会触发这一流程
React整个渲染机制就是React会调用React.render()构建一颗DOM树 当state或props改变时,render()会被再次调用构建出另外一颗树,利用Diff算法与之前的树进行对比,找到需要更新的地方进行更新并渲染到页面上,实现按需更新减少对真实DOM的操作,实现性能优化 个人理解这个问题重点在React.render() 和 Diff算法上
1.render函数,调用React.createElement接收type,options,childrens,生成虚拟dom。 2.通过改变state或props触发更新。 3.对比新旧虚拟dom,diff算法,深度优先,将实际需要改变的反应到真实dom。
感觉可以通过VDOM和diff算法来答,还可以再加上shouldComponentUpdate来
说一下,嗯....应该还有单向数据流,比如说父组件改变子组件是否会跟着改变之类的
针对“单向数据流”的含义,我看有的文章指的是数据流向只能父组件到子组件,有的文章又像上面说的数据驱动视图。后者才是原本的含义吧?
React的渲染原理涉及到Virtual Dom(虚拟DOM),当state或props改变时.利用Diff算法与之前的树进行对比,计算出Virtual DOM中真正变化的部分进行更新并渲染到页面上,实现按需更新减少对真实DOM操作,实现性能优化.
主要有两个阶段、三个部分,包括Render阶段的
三者是怎么配合的了?
另外也可以看mount和update在render和commit阶段如何工作的?
[react] 说说你对React的渲染原理的理解