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('你点击了我');
})

转载于:https://www.cnblogs.com/crazycode2/p/10759674.html

typescript 与 js 开发 react 的区别相关推荐

react.js开发_2020 React.js开发人员路线图
react.js开发成为阅读JS开发人员的插图指南,其中包含相关课程的链接 React JS或简称React是用于开发Web应用程序的前端或GUI的领先JavaScript库之一. 在Faceboo ...
使用React.js开发自己的Chrome插件
文章目录 1.配置环境 2.最简项目 3.修改内容 1.配置环境先安装nodejs,下载地址:下载 | Node.js 然后打开node命令行: 更改更新源: npm config set regi ...
React.js 开发常见问题
React.js 开发常见问题我需要为 React.js 雇用专门的开发人员,还是说只要会 JavaScript 的员工就行? 如果你有了一支熟练的 JavaScript 开发团队,那么使用 Rea ...
React.js开发生态系统概览 [译-转]
React.js 开发生态系统概览 [译] JavaScript领域发展速度很快,甚至有人认为这已经引起了负效应.一个前端库从早期开发的小玩具,到流行,再到过时,可能也就几个月时间.判断一个工具能否在 ...
arcgis开发多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
React入门第一个程序及使用JS和JSX的区别
JS和JSX都能用来写React 但是JSX相对来说会简便些,语法规则只是在JS的基础上多了一点点,还是比较推荐使用JSX,以下用代码举例二者区别. 使用JSX创建React: <!DOCTYP ...
使用 React.js 开发 Chrome 插件
(点击上方公众号,可快速关注) 来源:UncleChen unclechen.github.io/2017/06/16/使用ReactJS开发Chrome插件/ 一.背景相信看到这篇文章的人应该都用 ...
npm run dev报错_React + TypeScript 从零开发Popup组件并发布到 npm
上篇文章中介绍了如何从 0 到 1 搭建一个 React 组件库架子,但为了一两个组件去搭建组件库未免显得大材小用. 这次以移动端常见的一个组件 Popup 为例,以最方便快捷的形式发布一个流程完整的 ...
小邵教你玩转Typescript、ts版React全家桶脚手架
前言:大家好,我叫邵威儒,大家都喜欢喊我小邵,学的金融专业却凭借兴趣爱好入了程序猿的坑,从大学买的第一本vb和自学vb,我就与编程结下不解之缘,随后自学易语言写游戏辅助.交易软件,至今进入了前端领域, ...

typescript 与 js 开发 react 的区别

typescript 与 js 开发 react 的区别相关推荐

最新文章

热门文章