従来のjsとjsxとtsとtsxの違い

一、ファイルフォーマットの定義について
1、従来の開発モードはjsファイルまたはjsxファイルを定義することができる2、tsを利用して定義したファイルフォーマットtsx 2を開発し、stateの状態を定義する
1、伝統的な方式は直接構造関数の中で使用する

constructor(){
    this.state = {
        num1:10
    }
}

 
2、tsを使用する開発過程において、まず一つのインタフェースを定義し、データ型を規範化し、汎用型を通じてクラスに伝達する必要がある.
//インタフェース仕様stateのタイプを定義する 

export interface State{
    num1:number
}

 
//デフォルトでHelloクラスをエクスポートし、Componentにない場合objectを使用します

export default class Hello extends React.Component{
    constructor(props:Props){
        super(props);
        this.state = {
            num1:10
        }
    }
}

 
 
三、親コンポーネントから子コンポーネントへパラメータを渡す
1、従来の方式でそのまま使えばいいのですが、データ型リファレンスドキュメント2を制約したり、ts開発方式を使ったりするには、上記のstateと同じですが、どうしてもコンストラクション関数にsuper 4を書いたり、実際の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(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(this.refs["myp"]);
myp.addEventListener('click',()=>{
    console.log('     ');
})