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关键字,这个要全部都输入完才能找到(也就是整个关键字进行匹配,匹配到了整体才会查 ...
- SQL Server 常用内置函数
本文用于收集在运维中经常使用的系统内置(built-in)函数,持续整理中 一,常用Metadata函数 1,查看数据库的ID和Name db_id(‘DB Name’),db_name('DB ID ...
- 阿里云ESC入网和出网指的什么
什么是入网带宽和出网带宽 云服务器 ECS 的入网带宽和出网带宽皆以服务器角度出发.下表给出了入网带宽和出网带宽的具体内容: 带宽类别 (Mbit/s) 描述 入网带宽 流入云服务器 ECS 的带宽从 ...
- 在 Azure 上部署 Asp.NET Core Web App
在云计算大行其道的时代,当你要部署一个网站时第一选择肯定是各式各样的云端服务.那么究竟使用什么样的云端服务才能够以最快捷的方式部署一个 ASP.NET Core的网站呢?Azure 的 Web App ...
- SQL手工注入漏洞测试(Sql Server数据库)
还是先找到注入点,然后order by找出字段数:4 通过SQL语句中and 1=2 union select 1,2,3……,n联合查询,判断显示的是哪些字段,就是原本显示标题和内容时候的查询字段. ...
- Unity插件-NGUI学习笔记
Anchors 的作用 类似Android里面的.9格式图片的功能, 边框可以随着文字变大而变大. 实现方法: 用NGUI 创建一个Sprite, 命名为TextBg, 一个Label, Label的 ...
- Alpha版总结会议——班级派
一.开会的过程 在周一下午上课的最后20分钟内,我们组进行了“班级派”的alpha版的总结会议.首先进行的是分析目前的版本情况,每个人说了自己的进度,包括已经完成的以及即将要完成的.随后是分析前段时间 ...
- 将搬家至CSDN
emmm,感觉没利用好博客,自己也弄了一个github上面的hexo博客https://clarkkun.github.io/,但是死活传不上去内容,尴尬￣□￣||,三个博客齐头并进吧
- Leetcode——30.与所有单词相关联的字串【##】
@author: ZZQ @software: PyCharm @file: leetcode30_findSubstring.py @time: 2018/11/20 19:14 题目要求: 给定一 ...
- C# 7中函数多值返回_转自InfoQ
本文要点 应遵循<.NET设计规范:.NET约定惯用法与模式>一书.和十年前第一版出版时一样,书中给出的原则在当前依然有指导意义. API设计是最重要的.设计不好的API会在极大地增加软件 ...