react组件也像vue一样，有data和methods,但是写法就很不同了：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>state</title>

</head>

<body>

    <div id="app"></div>

    <script src="common/react.js"></script>

    <script src="common/react-dom.js"></script>

    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>

    <script type="text/babel">

        class App extends React.Component {

            constructor(props) {

                super(props)

                //data react官方这边叫state,在组件contructor上面定义

                this.state = {

                    count: 0

                }

            }

            //最常用个的生命钩子WillMount,DidMount,WillUpdate,DidUpdat

            componentWillMount() {

                console.log('1.componentWillMount')

            }

            componentDidMount() {

                console.log('2.componentDidMount')

            }

            componentWillUpdate(){

                console.log('4.componentWillUpdate')

            }

            componentDidUpdate(){

                console.log('3.componentDidUpdate')

            }

            add(event) {

                console.log('add')

                // 如果只写这"state.count++"react是不会自动重新去render组件的

                // this.state.count++

                // 只有调用setState react才会重新渲染组件

                this.setState({count: this.state.count+1})

            }

            //组件必须的render函数,相当于vue的<template>...</template> 调用自定义函数时必须bind(this)

            render() {

                return (<div>

                    <input type="text" value={this.state.count}/>

                    <input type="button" value="add" onClick={this.add.bind(this)}/>

                </div>)

            }

        }

        //渲染到#app上

        ReactDOM.render(

           <App/>,

           document.querySelector('#app')

        )

    </script>

</body>

</html>

react入门-组件方法、数据和生命周期的更多相关文章

  1. React Native组件的结构和生命周期

    React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...

  2. React源码剖析系列 － 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...

  3. React 源码剖析系列 － 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...

  4. android开发3：四大基本组件的介绍与生命周期

    android开发3:四大基本组件的介绍与生命周期 Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver ...

  5. .Net组件程序设计之对象生命周期

    .Net组件程序设计之对象生命周期 .NET 垃圾回收 IDisposable() Using语句 .NET 垃圾回收 是CLR管理着垃圾回收器,垃圾回收器监控着托管堆,而我们使用的对象以及系统启动是 ...

  6. Android四大组件之——Activity的生命周期（图文详解）

        转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai       联系方式:JohnTsai.Work@gmail.com       [Andro ...

  7. Spark Streaming揭秘 Day10 从BlockGenerator看接收数据的生命周期

    Spark Streaming揭秘 Day10 从BlockGenerator看接收数据的生命周期 昨天主要介绍了SparkStreaming中对于Receiver的生命周期管理,下面让我们进入到Re ...

  8. React初识整理（二）--生命周期的方法

    React生命周期主要有7中: 1. componentWillMount() :组件将要挂载时触发 ,只调用1次 2. componentDidMount() :组件挂载完成时触发,只调用1次 3. ...

  9. React学习笔记-4-什么是生命周期

    什么是声明周期?组件本质上就是状态机,输入确定,输出一定确定.如何理解这一点?react有两个特点,第一个就是去除了所有的手动dom操作,也就是使用jsx.第二个就是组件把状态和结果一一对应起来,从而 ...

随机推荐

  1. SQL面试整理（1）——数据库连接池

    在web开发中,如果JSP.Servlet或EJB使用JDBC直接访问数据库,每一次数据访问请求都必须经历建立数据库连接,打开数据库,存取数据库和关闭数据库连接等操作步骤,如果频繁发生这种数据库操作, ...

  2. [BZOJ2687]交与并[决策单调性]

    题意 给定 \(n\) 个区间,我们定义区间集合 \(S(|S|>1)\) 的权值为 区间交 \(\times\) 区间并,找出权值最大的区间集合. \(n\le 10^6\) 分析 首先排除区 ...

  3. java实现基于关键字的文件夹(文件）的搜索、文件夹（文件）的复制、删除

    最近在做一个项目,需要实现这几项功能,上网查了很多资料,自己研究了好几天终于实现了,现在与大家分享一下. 一.JAVA实现文件夹的搜索   在百度搜索N个技术文章,从哪些大牛们共享的资料中终于写出了我 ...

  4. JS基础内容小结（DOM&&BOM）（二）

    元素.childNodes:只读 属性 子节点列表集合 元素.nodeType:只读 属性 当前元素下的节点类型 元素.attributes : 只读 属性 属性列表集合 元素.children: 只 ...

  5. .NET Core容器化开发系列（一）——Docker里面跑个.NET Core

    前言 博客园中已经有很多如何在Docker里面运行ASP.NET Core的介绍了.本篇主要介绍一些细节,帮助初学的朋友更加深入地理解如何在Docker中运行ASP.NET Core. 安装Docke ...

  6. Hexo站点之域名配置【2】

    该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要 因为Hexo个人博客是托管在github之上,每次访问都要使用 ...

  7. C#_正则表达式

    概述 正则表达式,主要是用符号描述了一类特定的文本(模式).而正则表达式引擎则负责在给定的字符串中,查找到这一特定的文本. 本文主要是列出常用的正则表达式符号,加以归类说明.本文仅仅是快速理解了正则表 ...

  8. 以太坊—P2P网络

    Chord算法 1.Chord 概念 Chrod算法是P2P中的四大算法之一,是有MIT(麻省理工学院)于2001年提出 . Chord的目的是提供一种能在P2P网络快速定位资源的的算法,Chord并 ...

  9. Kali信息收集-搜索引擎

    1.google hacking intext:搜索正文内容 intitile:网页标题中的内容 inurl:url中的关键字 site:目标站点下 filetype:文件类型 cache:缓存 li ...

  10. VC++代码上传到VSS上 注意事项

    1.删除Debug文件,删除Release 文件2.删掉ncb,opt,clw,aps文件注.opt 工程关于开发环境的参数文件.ncb 无编译浏览文件(no compile browser).当自动 ...