欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 20:25:58
...
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>
//     );
//   }
// }

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

总结:

  • ‘div’ 直接渲染成
    即可,vdom可以做到
  • Input 和List 是 自定义组件(也是一个class类),vdom 默认不认识
  • 因此 Input 和 List 定义的时候必须声明 render 函数
    react中自定义组件的解析过程
  • 根据 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 函数