typescript 与 js 开发 react 的区别
一、从定义文件格式方面说
1、传统的开发模式可以定义js文件或者jsx文件
2、利用ts开发定义的文件格式tsx
二、定义state的状态来说
1、传统的方式直接在构造函数中使用
constructor(){
this.state = {
num1:10
}
}
2、使用ts开发过程中需要先定义一个接口,规范数据类型,通过泛型传入到类中
//定义一个接口规范state的类型
export interface State{
num1:number
}
// 默认导出一个Hello类,如果Component<Props,State>里面没有就用object
export default class Hello extends React.Component<Props,State>{
constructor(props:Props){
super(props);
this.state = {
num1:10
}
}
}
三、父组件传递参数到子组件
1、传统的方式直接使用就可以,如果要约束数据类型参考文档
2、使用ts开发方式,跟上面的state一样的,只是不管怎么样都要在构造函数中写super
四、从获取真实的DOM节点上来说(关于为什么要在componentDidMount中获取请参考参考)
1、传统的方式直接在DOM节点上定义ref就可以生命周期钩子函数componentDidMount中获取
const myref= this.refs.refname;
const myrefdom = findDOMNode(myref);
2、在ts中获取ref节点的方式
import * as ReactDOM from 'react-dom';
componentDidMount(){
console.log(`componentDidMount方法`);
var myp = ReactDOM.findDOMNode<HTMLInputElement>(this.refs["myp"]);
console.log(myp.innerText);
}
五、直接获取DOM节点
1、传统的方式
let pDom = document.querySelector("p");
pDom.addEventListener('click',()=>{
console.log('你点击了我');
})
2、在ts中根据上面的方式可以获取pDom但是绑定事件的时候就是null
var myp = ReactDOM.findDOMNode<HTMLInputElement>(this.refs["myp"]);
myp.addEventListener('click',()=>{
console.log('你点击了我');
})
.
typescript 与 js 开发 react 的区别的更多相关文章
- arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图(附源码下载)
基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- [转载]Sublime Text 3 搭建 React.js 开发环境
[转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...
- Vue.js与React的全面对比
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
- vuejs与angularjs以及react的区别?
1.与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令. 都支持过滤器:内置过滤器和自定义过滤器. 都支持双向数据绑定. 都不支持低端浏览器. 不同点: 1.AngularJS的学 ...
- TypeScript作为前端开发你必须学习的技能(一)
2019年,TypeScript已经开始渐渐的崭露头角,各大框架都说要使用TypeScript,虽然现在还没有完美,但是TypeScript很有可能会成为下一个主流技术. 废话就不多说了,直接开始吧. ...
- paip.java 以及JavaScript (js) 的关系以及区别
paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...
- JS和JSP的区别
最近很多同学在纠结于名词缩写之间的相似性,因此本人也来写一篇,讲讲JS和JSP的区别. SUN首先发展出SERVLET,其功能比较强劲,体系设计也很先进,只是,它输出HTML语句还是采用了老的CGI方 ...
- JQuery的ready函数与JS的onload的区别详解
JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...
随机推荐
- Python 小程序之 恋爱表情包爬取
虽然恋爱跟我一毛钱关系没有,,但是我还是想爬它 实验爬取网址:http://qq.yh31.com/zjbq/1491124.html # -*- coding: utf-8 -*- # @Time ...
- oracle数据库删除数据恢复
select * from table_name as of timestamp trunc(sysdate)-10; 数字部分可以调整到最近时间内 复制表内容 insert into res_pro ...
- Java实现Windows、Mouse监听器
1.通过实现WindowListener接口来实现Windows监听器: import java.awt.event.WindowEvent; import java.awt.event.Window ...
- TF:利用sklearn自带数据集使用dropout解决学习中overfitting的问题+Tensorboard显示变化曲线—Jason niu
import tensorflow as tf from sklearn.datasets import load_digits #from sklearn.cross_validation impo ...
- 【Spring Boot】构造、访问Restful Webservice与定时任务
Spring Boot Guides Examples(1~3) 参考网址:https://spring.io/guides 创建一个RESTful Web Service 使用Eclipse 创建一 ...
- 001.Kubernetes简介
一 Kubernetes概述 Kubernetes是一个全新的基于容器技术的分布式架构领先方案.Kubernetes(k8s)是Google开源的容器集群管理系统(谷歌内部:Borg).在Docker ...
- 转载:ThreadPoolExecutor 源码阅读
前言 之前研究了一下如何使用ScheduledThreadPoolExecutor动态创建定时任务(Springboot定时任务原理及如何动态创建定时任务),简单了解了ScheduledThreadP ...
- hr相关的
1.自我介绍? 2.为什么要离职?之前几家公司离职的原因分别是什么? 3.从上一家公司离职的原因? 4.目前就职的公司最大的收获是什么? 从上家公司到目前公司的最大收获是什么,要突出目标明确,在当前的 ...
- notepad++ 去空行
Press Ctrl+H (Replace) Select Extended from SearchMode Put \r\n\r\n in Find What Put \r\n in Replace ...
- BZOJ-8-2115: [Wc2011] Xor
https://www.lydsy.com/JudgeOnline/problem.php?id=2115 题意 : 给出一个连通无向图,求从1到n异或和最小的路径. 思路 :随意找一条简单路径 1- ...