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>
// );
// }
// }
创建**自定义组件(这里是 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 函数
上一篇: 自定义View