React组件的使用

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

 //react语法塘
 import React from 'react';
 //reactDom用来操作虚拟DOM
 import ReactDom from 'react-dom';
 //导入组件
 import App from './App';
 ReactDom.render(
     /*使用时需将组件App设置为 标签格式 */
     <App/>,
     document.querySelector('#root'),
     ()=>{
         console.log('渲染完成');
     }
 )

二、App.js【组件App】

 //只需调入react语法塘【结构化赋值】
 import React,{Component,Fragment} from 'react';
 
 // React.Component : 所有组件的父类【在react当中所有的组件创建的时候必须首字母大写，为了区分Element元素和组件的区别】
 class App extents Component{
     // constructor 初始化函数 可以用来存放当前组件所需要的一些状态【必须写一个函数 render】
     constructor(){
         // super 必须要写
         super();
         this.state = {
             message:"王五"
         }
     }
 
     // react的生命周期函数【具体信息请向下划】【react中的函数不用加（）】
     render(){
         let {message} = this.state;
         return (
             // Fragment 作用当做节点标签使用，但是不会被渲染成标签【类似文档碎片】
             <Fragment>
                 /*改变handleClick方法中this的指向，未改之前this指向此div元素【但又因为此div是虚拟dom，所以this指向null】*/
                 <div onClick={this.handleClick.bind(this)}>{message}</div>
             </Fragment>
         )
     }
 
     handleClick(){
         /*
             react 中不允许这这样改变数据
             this.state.message = '1234';
         */
 
         this.setState({
             message:"1234"
         })
     }
 }
 
 //将组件导出去
 export default App;

三、对上方的解释

    1、render 【生命周期函数】

        作用：渲染虚拟DOM

 

        特点：当 render 渲染虚拟DOM的时候会将数据和虚拟DOM进行相结合生成真实的DOM结构，会将当前的虚拟DOM在缓存中保存一份，当数据发生改变的时候会将缓存中的虚拟DOM和第二次改变的虚拟DOM进行对比。修改需要改变的虚拟DOM节点，而不是改变所有的虚拟DOM【diff算法】

    

    2、constructor 初始化函数 可以用来存放当前组件所需要的一些状态

 

            状态（属性）

 

            this.state = {

                name:"tom"

            }

 

    3、react 中如果需要改变this.state里面的数据 需要用this.setState方法

 

        用法为：

            this.setState({

                key:val

            },

            ()=>{

                //在这可以验证状态是否修改， 获取到最新的DOM结构【而vue通过this.$nextTick获取最新的DOM结构】

            })

 

        参数一：对象【改变状态】

            key:需要修改的状态

            val：值

        参数二：回调函数