react中自定义组件的解析过程

import Input from './input/index.js'
import List from './list/index.js'

function render() {
    return (
        <div>
            <p>this is demo</p>
            <Input addTitle={this.addTitle.bind(this)}/>
            <List data={this.state.list}/>
        </div>
    )
}

// var profile = <div>
//   <img src="avatar.png" className="profile" />
//   <h3>{[user.firstName, user.lastName].join(' ')}</h3>
// </div>;

// class Input extends Component {
//   render() {
//     return (
//       <div>
//           <input value={this.state.title} onChange={this.changeHandle.bind(this)}/>
//           <button onClick={this.clickHandle.bind(this)}>submit</button>
//       </div>
//     );
//   }
// }

创建**自定义组件（这里是 List 组件和 Input 组件）**时生成的js代码React.createElement()中第一个参数是自定义组建的class名，而不是字符串。

总结：

• ‘div’ 直接渲染成
  即可，vdom可以做到
• Input 和List 是 自定义组件（也是一个class类），vdom 默认不认识
• 因此 Input 和 List 定义的时候必须声明 render 函数
  
• 根据 props 初始化实例，然后执行实例的 render 函数
• render 函数返回的还是 vnode 对象

    <List data={this.state.list}/>

这种jsx代码会被解析成下面js代码：

React.createElement(List,{data:this.state.list});

上面js代码其实是下面这种执行方式：

var list = new List({data:this.state.list}); // 生成一个 List 实例
var vnode = list.render();// render 函数返回的是 jsx，最终会被编译成 js代码，返回的是 vnode

总结jsx和vdom之间的关系：

• 为何需要vdom：jsx需要渲染成html，jsx是一个语法糖，它最终要被渲染成和html才能被浏览器识别，所以需要转换成 js 代码，js在这种数据驱动视图的场景中不可能亲自去操作 DOM ，它需要vdom作为中间层来将 js 代码转化成 html ，react 使用vdom是必须的。
• React.createElement 和 h 函数都会生成 vnode
• 何时 patch ：ReactDOM.render() 初次渲染和 setState 再次渲染
• 自定义组件的解析：初始化实例，然后执行 render 函数