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.第二个就是组件把状态和结果一一对应起来,从而 ...
随机推荐
- sql——inner join，where，left join的区别
1.select a.name,a.sex,a.subject,a.age from TableA a, TableB b where a.name = b.name 2.select a.name, ...
- 【Android UI设计与开发】第01期：引导界面（一）ViewPager介绍和使用详解
做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受 ...
- STM8S——8位基本定时器（TIM4）
简介:该定时器由一个带可编程预分频器的8位自动重载的向上计数器所组成,它可以用来作为时基发生器,具有溢出中断功能. 主要功能: (1)8位向上计数的自动重载计数器: (2)3位可编程的预分配器(可在运 ...
- cocos2dx内存优化
纹理消耗了大量内存 在大部分情况下,是纹理(textures)消耗了游戏程序大量的内存.因此,纹理是我们首要考虑优化的对象 纹理加载 cocos2d里面纹理加载分为两个阶段:从图片文件中创建一个Ima ...
- Kubernetes采用CoreDNS
参考文档: kubernetes插件:https://github.com/kubernetes/kubernetes/tree/master/cluster/addons/dns/coredns 自 ...
- 使用tensorflow实现mnist手写识别(单层神经网络实现)
import tensorflow as tf import tensorflow.examples.tutorials.mnist.input_data as input_data import n ...
- .net转PHP从零开始-配置visual studio 2013 PHP开发环境php for visual studio
作为一个.net开发者,一直在visual studio这款强大的编辑器宠爱下,其他编辑器都不会用,也用着不熟练.最近这不是转php吗,使用php编辑器很不爽,觉得还是用visual studio舒服 ...
- CodeMirror 小册子
User manual and reference guide version 5.41.1 用户手册和参考指南 CodeMirror is a code-editor component ...
- BugPhobia开发篇章：Beta阶段第III次Scrum Meeting
0x01 :Scrum Meeting基本摘要 Beta阶段第三次Scrum Meeting 敏捷开发起始时间 2015/12/15 00:00 A.M. 敏捷开发终止时间 2015/12/15 23 ...
- 冲刺Two之站立会议5
昨天对视频音频的内容查询收集了相关资料,今天就主要对此进行了加工.先是使两台PC进行通信,不断进行测试.改进:测试.改进.最后初见成效,但还是没有达到我们最初的标准.