React組件的使用

 1、index.js 文件【基本配置】

 

 1 //react語法塘
 2 import React from 'react';
 3 //reactDom用來操做虛擬DOM
 4 import ReactDom from 'react-dom';
 5 //導入組件
 6 import App from './App';
 7 ReactDom.render(
 8     /*使用時需將組件App設置爲 標籤格式 */
 9     <App/>,
10     document.querySelector('#root'),
11     ()=>{
12         console.log('渲染完成');
13     }
14 )

 

2、App.js【組件App】

 

 1 //只需調入react語法塘【結構化賦值】
 2 import React,{Component,Fragment} from 'react';
 3  
 4  
 5 // React.Component : 全部組件的父類【在react當中全部的組件建立的時候必須首字母大寫，爲了區分Element元素和組件的區別】
 6 class App extents Component{
 7     // constructor 初始化函數 能夠用來存放當前組件所須要的一些狀態【必須寫一個函數 render】
 8     constructor(){
 9         // super 必需要寫
10         super();
11         this.state = {
12             message:"王五"
13         }
14     }
15  
16     // react的生命週期函數【具體信息請向下劃】【react中的函數不用加（）】
17     render(){
18         let {message} = this.state;
19         return (
20             // Fragment 做用當作節點標籤使用，可是不會被渲染成標籤【相似文檔碎片】
21             <Fragment>
22                 /*改變handleClick方法中this的指向，未改以前this指向此div元素【但又由於此div是虛擬dom，因此this指向null】*/
23                 <div onClick={this.handleClick.bind(this)}>{message}</div>
24             </Fragment>
25         )
26     }
27  
28     handleClick(){
29         /*
30             react 中不容許這這樣改變數據
31             this.state.message = '1234';
32         */
33  
34         this.setState({
35             message:"1234"
36         })
37     }
38 }
39  
40 //將組件導出去
41 export default App;

 

3、對上方的解釋

    一、render 【生命週期函數】

        做用：渲染虛擬DOM

 

        特色：當 render 渲染虛擬DOM的時候會將數據和虛擬DOM進行相結合生成真實的DOM結構，會將當前的虛擬DOM在緩存中保存一份，當數據發生改變的時候會將緩存中的虛擬DOM和第二次改變的虛擬DOM進行對比。修改須要改變的虛擬DOM節點，而不是改變全部的虛擬DOM【diff算法】

    

    二、constructor 初始化函數 能夠用來存放當前組件所須要的一些狀態

 

            狀態（屬性）

 

            this.state = {

                name:"tom"

            }

 

    三、react 中若是須要改變this.state裏面的數據 須要用this.setState方法

 

        用法爲：

            this.setState({

                key:val

            },

            ()=>{

                //在這能夠驗證狀態是否修改， 獲取到最新的DOM結構【而vue經過this.$nextTick獲取最新的DOM結構】

            })

 

        參數一：對象【改變狀態】

            key:須要修改的狀態

            val：值

        參數二：回調函數