传统js和jsx与ts和tsx的区别⼀、从定义⽂件格式⽅⾯说
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
}
}
}
三、⽗组件传递参数到⼦组件
原生js和js的区别
1、传统的⽅式直接使⽤就可以，如果要约束数据类型参考⽂档
2、使⽤ts开发⽅式，跟上⾯的state⼀样的，只是不管怎么样都要在构造函数中写super
四、从获取真实的DOM节点上来说(关于为什么要在componentDidMount中获取请参考参考)
1、传统的⽅式直接在DOM节点上定义ref就可以⽣命周期钩⼦函数componentDidMount中获取
const myref= fname;
const myrefdom = findDOMNode(myref);
2、在ts中获取ref节点的⽅式
import * as ReactDOM from 'react-dom';
componentDidMount(){
console.log(`componentDidMount⽅法`);
var myp = ReactDOM.findDOMNode<HTMLInputElement>(fs["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>(fs["myp"]); myp.addEventListener('click',()=>{
console.log('你点击了我');
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。