react首次渲染实现原理
2017-03-30 17:20:53 0 举报AI智能生成
React首次渲染的实现原理是通过协调组件树来进行的。当应用的状态发生改变时，React会通过调度算法来确定哪些组件需要重新渲染，然后生成一个新的组件树。在生成新组件树的过程中，React会进行对比操作，找出新旧组件树的差异，并将差异应用到实际的DOM上，从而实现更新。这个过程是异步的，为了提高用户体验，React会在浏览器空闲时期执行更新操作。同时，React还会通过shouldComponentUpdate生命周期方法来判断组件是否需要更新，避免不必要的渲染。总之，React首次渲染的实现原理是通过状态管理、调度算法、对比操作和异步更新等技术手段来实现高效、流畅的用户界面更新。
作者其他创作
大纲/内容
react.render
参数可以是：字符串，reactElement
componentInstance = instantiateReactComponent（element）
是一个工厂函数
入口参数是reactElement, 一个obj
可以返回ReactTextComponent实例
原型方法mountComponent
return htmlStr
为htmlStr添加rootId
可以返回一个reactDOMComponent实例
有3个属性
_currentElement: 对参数element的引用
rootId
_renderedChildren，是一个数组，数组元素是组件实例
原型方法
mountComponent
根据type生成dom结构
遍历element.props
如果props.a是一个注册了一个事件，为dom delegate props.a
如果是普通变量属性，直接讲a=props[a]拼接到dom字符串中
自定义props怎么识别？
如果有props.children
初始化childInstances数组为[]
每一个child是reactElement
childComponentInstance=instantiateReactComponent(child), 并加入childInstances
执行childComponentInstance的mountComponent方法，获得html str, 拼接到dom字符串中
this._renderedChild = childrenInstances
可以返回一个自定义组件实例
除了currentElement和id之外，有一个instance属性
mountComponent
取type的值：构造函数A
以_currentElement的props作为属性对象
init = new A(props)
this._instance = init(自定义组件实例)
执行init.componentWillMount
var renderedElement = init.render()，返回reactElement或文本节点
对此reactElement执行instantiateReactComponent
this._renderedComponent = 将reactElement构建为component（reactComponent实例）
执行renderedComponent的mountComponent, 返回html str
renderedComponent mount完之后，执行componentDidMount
render方法返回虚拟dom, 即reactElement
返回一个组件实例, 一个obj
markup = componentInstance.mountComponent(index++)
$(container).html(markup)
trigger mountReady
react.createElement
创建虚拟dom，虚拟dom又叫reactElement
reactElement有很多属性
type:节点类型
key:唯一标识
props：自定义属性
定义props = {}
3个入口参数
type: 节点类型
字符串，比如"div"
Class(构造函数)， react.createClass创建的
config: 配置信息
可以配置element的key
除key之外的每一个属性作为props的属性， 例如props.a = config.a
children: 子元素
children作为一个数组赋值给props.children
返回 new ReactElement
入口参数：type, key, props
react.createClass
创建自定义元素
返回一个构造函数(构造reactElement), 可以作为createElement的参数
有props和state属性
有生命周期函数
自由主题
0 条评论
下一页
