React 16 源码瞎几把解读 【二】 react组件的解析过程

一、一个真正的react组件编译后长啥样？

我们瞎几把解读了react 虚拟dom对象是怎么生成的，生成了一个什么样的解构。一个react组件不光由若干个这些嵌套的虚拟dom对象组成，还包括各种生命周期钩子、自定义方法、事件等组成

下面让我们继续探索

react组件写法：

 1 // 一个再普通不过的react组件写法
 2 
 3 
 4 mport React,{Component} from 'react';
 5 import Header from '../components/header';
 6 class Home extends Component {
 7     constructor(props){
 8         super(props);
 9     }
10     componentWillMount(){
11         console.log('willMount');
12     }
13     handleClickEvent(){
14         console.log('click');
15     }
16     render(){
17         let {name} = this.props;
18         return (
19             <div ref="home">
20                 <Header kk="js"/>
21                 <div>主页:{name}</div>
22                 <div>
23                     <p onClick={this.handleClickEvent}>哈哈哈哈</p>
24                 </div>
25             </div>
26         )
27     }
28 }
29 
30 export default Home;

View Code