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.第二个就是组件把状态和结果一一对应起来,从而 ...
随机推荐
- 【个人】爬虫实践，利用xpath方式爬取数据之爬取虾米音乐排行榜
实验网站:虾米音乐排行榜 网站地址:http://www.xiami.com/chart 难度系数:★☆☆☆☆ 依赖库:request.lxml的etree (安装lxml:pip install ...
- [BZOJ4857][JSOI2016]反质数序列[最大点独立集]
题意 在长度为 \(n\) 的序列 \(a\) 中选择尽量长的子序列,使得选出子序列中任意两个数的和不为质数. \(n\leq3000\ ,a_i\leq10^5\). 分析 直接按照奇偶性建立二分图 ...
- SpringBoot整合EHcache学习笔记
为了提高系统的运行效率,引入缓存机制,减少数据库访问和磁盘IO.下面说明一下ehcache和SpringBoot整合配置 前言介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特 ...
- json-server+mockjs 模拟REST接口
前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...
- node.js学习笔记（四）——EventEmitter
error 事件 EventEmitter 定义了一个特殊的事件 error,它包含了错误的语义,我们在遇到异常的时候通常会触发 error 事件.当 error 被触发时,EventEmitter ...
- Kafka API: TopicMetadata
Jusfr 原创,转载请注明来自博客园 TopicMetadataRequest/TopicMetadataResponse 前文简单说过"Kafka是自描述的",是指其broke ...
- PhpStorm 配置本地断点调试
前言: 有够拖延症的,应该是一年多以前就使用过PhpStorm的debug断点调试了吧,不够过当时是别人帮我配的,我记得还挺复杂.后来重装系统后尝试了配置,好像没成吧,记得当初老师帮我配也没成(... ...
- 『编程题全队』Alpha 阶段冲刺博客Day7
1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.添加了网络通信管理类 2.稍微修改了燃尽图模块ChartWidget 3.在主窗口中添加了用户信息框 4.重构了项目中的文件结 ...
- Alpha冲刺第10天
Alpha第10天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 0316 ...
- HDU 2088 Box of Bricks
http://acm.hdu.edu.cn/showproblem.php?pid=2088 Problem Description Little Bob likes playing with his ...