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.第二个就是组件把状态和结果一一对应起来,从而 ...
随机推荐
- SSISDB5：使用TSQL脚本执行Package
SSISDB 系列随笔汇总: SSISDB1:使用SSISDB管理Package SSISDB2:SSIS工程的操作实例 SSISDB3:Package的执行实例 SSISDB4:当前正在运行的Pac ...
- SSIS 剖析数据流之：连接和查找转换
在SSIS的数据流组件中,SSIS引擎使用Merge Join组件和 Lookup组件实现TSQL语句中的inner join 和 outer join 功能,Lookup查找组件的功能更类似TSQL ...
- 【Android UI设计与开发】第02期：引导界面（二）使用ViewPager实现欢迎引导页面
本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载 ...
- kubernetes 网络故障遇见的坑
1.记录一下自己搭建kubernetes 集群遇见的坑. 过程是我学技术以来最大的bug,处处都是坑,稍微写成一点, 就完全起不来, 起不来之后, 还找不到故障点, 郁闷之极. 后续会慢慢分享给大家. ...
- JMeter的下载安装以及运行教程
一.安装JMeter的必要准备 1.安装JDK JDK下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html ...
- 第二阶段冲刺——four
个人任务: 季方:实现团队博客作业查询. 王金萱:优化统计团队博客结果界面的显示. 马佳慧:选择功能界面的背景设计. 司宇航:用servlet完成名单打印功能. 站立会议: 任务看板和燃尽图:
- 用户场景模拟+Spec
场景模拟: Spec: 浏览包车信息-->登录-->选择包车城市-->选择去/回程-->选择路线-->预定-->选择包车日期-->出发时间和地点--> ...
- C#(近期目标)
最近很多同学为了实习都在学Java,但是我个人更偏好C#,首先因为自己基础不是太好,而C#又更容易入门,拥有比较完善的开发环境,是微软开发出来的语言.它吸收了C++和Java两门语言的所有有点,因为它 ...
- Apache修改了配置文件中的路径后，登录该地址网页出现问题 (其中介绍了selinux的域和安全上下文)
默认的网站数据存放在: /var/www/html 首页名称: index.html Apache服务程序的主配置文件: /etc/httpd/conf/httpd.conf (若是将 119 行 ...
- C语言入门：01.C语言概述
一.计算机和软件常识 1.计算机运行原理 (1)硬件基本组成:硬盘.内存.CPU (2)个部件之间的运作协调(下图)