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结构绘制 ...
随机推荐
- webstrom中如何将npm菜单调出?
在package.json文件上点击右键>>>点击show npm scripts就可以了.如图:
- 2017-2018-1 20179202《Linux内核原理与分析》第三周作业
一.mykernel 实验 : 1.深度理解函数调用堆栈: 上周已经一步步地分析过含有变量的函数调用时堆栈的变化,现在对堆栈框架进行一些补充,以以下程序为例: int main() { ... g(x ...
- mongoose之操作mongoDB数据库
mongoose是node.js操作mongoDB数据库的一种工具,借助于mongoose,我们可以便捷的完成一些数据库的基本操作,基本使用如下: 1.安装 npm install mongoose ...
- JDK 1.6 HashMap 源码分析
前言 前段时间研究了一下JDK 1.6 的 HashMap 源码,把部份重要的方法分析一下,当然HashMap中还有一些值得研究得就交给读者了,如有不正确之处还望留言指正. 准备 需要熟悉数组 ...
- Winform-DataGridView
Winform-DataGridView 1 常用属性 // 1.点击后的选中模式 this.dgv.SelectionMode = DataGridViewSelectionMode.FullRow ...
- Vue渲染列表,在更新data属性后,列表未更新问题
初始化代码如下var tableModel = new Vue({el: '#datatable',data: {items: listData}}); 当我对列表操作时,listData=>n ...
- Java笔记(八)TreeMap & TreeSet & LinkedHashMap
TreeMap & TreeSet & LinkedHashMap 一.TreeMap HashMap缺陷:键值对之间没有特定的顺序.在TreeMap中, 键值对之间按键有序,Tree ...
- LeetCode(283. 移动零)
问题描述 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必须在原数 ...
- C#编程 - 交通灯模拟
程序写的有点繁杂,但大体功能出来的! 效果图: using System; using System.Collections.Generic; using System.Linq; using Sys ...
- ironic-inspector硬件信息收集
主机上报 ironic-inspector流程会在小系统里收集裸机的硬件信息,然后上报到ironic-conductor. 其中收集硬件信息主要使用hwinfo和lshw命令.Centos可以使用如下 ...