一、从定义文件格式方面说
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 的区别的更多相关文章

  1. arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图(附源码下载)

    基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...

  2. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  3. [转载]Sublime Text 3 搭建 React.js 开发环境

    [转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...

  4. Vue.js与React的全面对比

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

  5. vuejs与angularjs以及react的区别?

    1.与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令. 都支持过滤器:内置过滤器和自定义过滤器. 都支持双向数据绑定. 都不支持低端浏览器. 不同点: 1.AngularJS的学 ...

  6. TypeScript作为前端开发你必须学习的技能(一)

    2019年,TypeScript已经开始渐渐的崭露头角,各大框架都说要使用TypeScript,虽然现在还没有完美,但是TypeScript很有可能会成为下一个主流技术. 废话就不多说了,直接开始吧. ...

  7. paip.java 以及JavaScript (js) 的关系以及区别

    paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  8. JS和JSP的区别

    最近很多同学在纠结于名词缩写之间的相似性,因此本人也来写一篇,讲讲JS和JSP的区别. SUN首先发展出SERVLET,其功能比较强劲,体系设计也很先进,只是,它输出HTML语句还是采用了老的CGI方 ...

  9. JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...

随机推荐

  1. 给定数组长度2n,分成n对,求n对最小元素之和最大

    给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最大. 示例 ...

  2. Chrome 浏览器数据无法同步,google账号登录失败,提示 Request canceled

    解决方法: 进账号设置不同步 钱包数据 (即取消"Google Pay 中存储的付款方式和地址信息"项的同步) 参考链接: https://www.v2ex.com/t/45285 ...

  3. 安卓编程资源文件string中对占位符的使用详解

    这里将为你详细介绍占位符的使用,将其学以致用,可以达到简化布局文件,减少字符串资源量. 1.在资源文件中的使用. 打开资源文件中的strings.xml文件,进行编辑.如下图所示: 图  1.0 2. ...

  4. README 语法记录

    转自:nblogs.com/liugang-vip/p/6337580.html 正文: 1.标题的几种写法: 第一种:     前面带#号,后面带文字,分别表示h1-h6,上图可以看出,只到h6,而 ...

  5. GUI:GUI的方式创建/训练/仿真/预测神经网络—Jason niu

    (1)导入数据:点击最左底部Import 按钮 (2)创建模型network_Jason_niu:点击底部的New按钮 (3)设置参数并训练:点击底部的Open按钮 (4)仿真预测: 大功告成!

  6. Gym 100342J Triatrip (求三元环的数量) (bitset优化)

    <题目链接> 题目大意:用用邻接矩阵表示一个有向图,现在让你求其中三元环的数量. 解题分析:先预处理得到所有能够直接到达每个点的集合$arrive[N]$和所有能够由当前点到达的集合$to ...

  7. docker部署springboot项目

    本文介绍一下docker如何部署springboot项目. 前提条件: 1.可以运行jar包的环境 2.机器上已经安装了docker 3.准备部署的springboot的jar包 4.Dockerfi ...

  8. 使用shiro安全管理

    之前介绍了springboot使用security进行权限管理,这篇文件介绍一下springboot使用shiro进行安全管理. 简述本文的场景,本文使用springboot1.5.9+mysql+j ...

  9. Python3基础-Python作用域详述(转载)

    转载文章 转载文章 作者:骏马金龙 出处:http://www.cnblogs.com/f-ck-need-u/p/9925021.html Python作用域详述 作用域是指变量的生效范围,例如本地 ...

  10. Navicat破解

    Navicat是一款我们经常使用的可视化sql工具,可偏偏它呢又收费,本着浪费可耻的理念,只有去网上找各种破解方法,却发现很多方法对于Navicat 12都不支持(本人使用的Navicat 12).最 ...