JS问题整理与思考--react vnode,patch和自定义组件的解析

为何需要vdom

  • vdom 是React初次推广开来的,结合JSX
  • JSX就是模版,最重要渲染成html
  • 初次渲染+修改state后re-render
  • 正好符合vdom的应用场景

何时patch

  • 初次渲染-ReactDOM.render(<\App/>,container)
  • 会触发patch(container,vnode)
  • re-render -- setState
  • 会触发patch(vnode,newVnode)

JSX对自定义组件的解析

  • 'div' -- 直接渲染div即可,vdom可以做到
  • Input和List,是自定义组件(class),vdom默认不认识
  • 因此Input和List定义的时候必须声明render函数
  • 根据props初始化示例,然后执行实力的人的render函数
  • render函数返回的还是vnode对象
import Input from './input/index'
import List from './list/index'
function render() {
    return (
        <div>
            <Input addTitle={this.addTitle.bind(this)}/>
            <List data={this.state.list} />
        </div>
    )
}
// ----------------------解析结果------
import Input from './input/index';
import List from './list/index';
function render() {
    return React.createElement(
        'div',
        null,
        React.createElement(Input, { addTitle: this.addTitle.bind(this) }),
        React.createElement(List, { data: this.state.list })
    );
}

类似于

React.createElement(List,{})
var list = new List({data:this.state.list})
var vnode = list.render()

随机浏览