react入门-组件方法、数据和生命周期
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入门-组件方法、数据和生命周期的更多相关文章
- React Native组件的结构和生命周期
React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...
- React源码剖析系列 － 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- React 源码剖析系列 － 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- android开发3：四大基本组件的介绍与生命周期
android开发3:四大基本组件的介绍与生命周期 Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver ...
- .Net组件程序设计之对象生命周期
.Net组件程序设计之对象生命周期 .NET 垃圾回收 IDisposable() Using语句 .NET 垃圾回收 是CLR管理着垃圾回收器,垃圾回收器监控着托管堆,而我们使用的对象以及系统启动是 ...
- Android四大组件之——Activity的生命周期（图文详解）
转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai 联系方式:JohnTsai.Work@gmail.com [Andro ...
- Spark Streaming揭秘 Day10 从BlockGenerator看接收数据的生命周期
Spark Streaming揭秘 Day10 从BlockGenerator看接收数据的生命周期 昨天主要介绍了SparkStreaming中对于Receiver的生命周期管理,下面让我们进入到Re ...
- React初识整理（二）--生命周期的方法
React生命周期主要有7中: 1. componentWillMount() :组件将要挂载时触发 ,只调用1次 2. componentDidMount() :组件挂载完成时触发,只调用1次 3. ...
- React学习笔记-4-什么是生命周期
什么是声明周期?组件本质上就是状态机,输入确定,输出一定确定.如何理解这一点?react有两个特点,第一个就是去除了所有的手动dom操作,也就是使用jsx.第二个就是组件把状态和结果一一对应起来,从而 ...
随机推荐
- idea 中全局查找不到文件 （两shift），单页搜索不到关键字的原因
全局查找不到文件是因为把要找的目录的本级或者上级设置为了额外的,所以自然找不到 而单页搜索不到内容是因为设置了words关键字,这个要全部都输入完才能找到(也就是整个关键字进行匹配,匹配到了整体才会查 ...
- 完爆Facebook/GraphQL，APIJSON全方位对比解析(三)-表关联查询
相关阅读: 完爆Facebook/GraphQL,APIJSON全方位对比解析(一)-基础功能 完爆Facebook/GraphQL,APIJSON全方位对比解析(二)-权限控制 自APIJSON发布 ...
- docker之私有仓库镜像管理
一.查看本地镜像 二.给镜像打标记(tag ) [root@node03 ~]# docker tag wordpress:v1 192.168.1.197:5000/wordpress:v1 2.删 ...
- 使用SignalR实时Web应用程序
实时Web应用程序能够实时地将服务器端内容推送到连接的客户端.对于ASP.NET开发人员,ASP.NET SignalR是一个向其应用程序添加实时Web功能的库.它利用了多种传输方式,根据客户端和服务 ...
- 《Pro SQL Server Internals, 2nd edition》中CHAPTER 7 Designing and Tuning the Indexes中的Clustered Index Design Considerations一节（译）
<Pro SQL Server Internals> 作者: Dmitri Korotkevitch 出版社: Apress出版年: 2016-12-29页数: 804定价: USD 59 ...
- wpf-典型的mvvm模式通用中小型管理系统框架0
之前就一直在想着写这么一系列博客,将前段时间(也算有点久了)自己编写的一套框架分享下,和园子里的诸位大牛交流交流,奈何文思枯竭,提键盘而无从敲起,看来只有coding时才不会有这种裤子都脱了,才发现对 ...
- Linux内核分析——第一周学习笔记
20135313吴子怡.北京电子科技学院 chapter 1 知识点梳理 第一节 存储程序计算机工作模型 1.冯诺依曼体系结构:即具有存储程序的计算机体系结构.目前大多数拥有计算和存储功能的设备(智能 ...
- java词频统计——改进后的单元测试
测试项目 博客文章地址:[http://www.cnblogs.com/jx8zjs/p/5862269.html] 工程地址:https://coding.net/u/jx8zjs/p/wordCo ...
- [Asp.net MVC]Asp.net MVC5系列——布局视图
目录 系列文章 概述 布局视图 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net M ...
- CentOS下面磁盘扩容处理
1. 给虚拟机增加一块硬盘: 过程不表 2. 增加了硬盘之后需要重启一下 查看磁盘 ls /dev/sd* 3. 使用 gdisk 处理磁盘 注意 这里面fdisk 貌似没法处理成 LVM 必须使用 ...