React学习笔记二——组件的理解和使用

╰半夏微凉° 2022-10-09 00:38 56阅读 0赞

## 函数式组件（简单组件） ##

*  函数名首字母必须大写
 *  ReactDOM.render()的第一个参数必须是首字母大写的闭合标签，

<head>
      <div id="test"></div>
    </head>
    
    //引入一些react核心库和babel
    <script type="text/javascript"  src="..."></script>
    
    <script type="text/babel">
     //1.创建一个函数组件
      function Demo(){   //函数名首字母必须大写
       return <h2>函数组件</h2>
      }  
     //2.渲染组件到页面
     ReactDOM.render(<Demo/>,document.getElementById('test'))
    </ script>

执行了ReactDOM.render(,…)之后，发生了什么？

*  React解析组件标签，找到了Demo组件
 *  发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转化为真实DOM，随后呈现到页面上

## 类式组件（复杂组件） ##

<head>
      <div id="test"></div>
    </head>
    
    //引入一些react核心库和babel
    <script type="text/javascript"  src="..."></script>
    
    <script type="text/babel">
     
     //1.创建一个类式组件
      class Demo2 extends React.Component { 
    	  render() {   
    	    //render是放在类（Demo2组件）的原型对象上的，供实例使用
    	    //render的this是类（Demo2组件）的实例对象
    	    return <h2>类式组件</h2>
    	  }
      } 
     //2.渲染虚拟DOM到页面
     ReactDOM.render(<Demo2/> ,document.getElementById('test'))
    </ script>

执行了ReactDOM.render(,…)之后，发生了什么？

*  React解析组件标签，找到了Demo2组件
 *  发现组件是使用类定义的，随后new出来该类（Demo2）的实例，并通过该实例调用到原型对象上的render方法
 *  将render返回的虚拟DOM转化为真实DOM，随后呈现到页面上