一、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:值
        参数二:回调函数
 

React组件的使用的更多相关文章

  1. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  2. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  3. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

  4. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  5. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  6. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  7. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  8. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  9. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  10. React组件系统、props与状态(state)

     多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...

随机推荐

  1. Winform访问本地SQLServer数据库文件

    Winform访问本地SQLServer数据库文件 1.项目中添加config配置,如下: <configuration> <connectionStrings> <ad ...

  2. 什么是延展性(Malleability,可鍛性)

    原文:http://8btc.com/forum.php?mod=viewthread&tid=23878&page=1#pid270878 1. 什么是延展性(Malleabilit ...

  3. Tomcat中server.xml文件内各节点详解

    由于 Tomcat 基于 Java,实际上在各种 Linux 发行版里的配置方法都大同小异,只是我看见在 Arch Linux 环境里搭建 Tomcat 的文章比较少,所以在 Arch Linux 实 ...

  4. webstorm javascript IDE调试

    webstorm是我见过的前端开发调试最好用的IDE工具了,它不仅具有强大的编辑,代码查阅引用功能,更有强大的js调试功能,这是任何通过firebug,chrome devtool,console.l ...

  5. 什么是git subcommand,如何创建git子命令?

    大多数git用户知道如何在git中创建一个alias以便更便利地使用相关命令.很少有人知道至少不会好好利用的是:你实际上可以为Git创建扩展或者plugin,以便上git完成任何你希望完成的工作.这就 ...

  6. windows时间同步脚本

    #!/usr/bin/env python# -*- coding:UTF-8 -*-# 脚本用于windows时间同步,设置window计划任务每五分钟执行一次 import timeimport ...

  7. React Native调试技巧与心得

    转自:http://blog.csdn.net/quanqinyang/article/details/52215652 在做React Native开发时,少不了的需要对React Native程序 ...

  8. UID卡修改&UID锁死修复

    好久没发RFID类文章,最近有小伙伴问到UID卡的问题,在这里就写一写吧. 首先是UID修改的问题,只要卡是UID卡,就都可以修改UID,首先读卡器连接电脑,卡片放到读卡器上. 然后我们要用一个工具, ...

  9. SpringMVC 如何定义类型转换器

    举例说明, 将一个字符串转换成的 User 类型. 例如将字符串 1-zcd-1234-zcd@163.com-1999/12/12  转换成User 类型. 一.实体类 public class U ...

  10. BZOJ2434:[NOI2011]阿狸的打字机(AC自动机,线段树)

    Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...