2016-09-21 106 views
2

當使用ReactJS和TypeScript時,在構造函數中初始化類變量還是在聲明類變量時更好?它工作得很好,無論哪種方式,轉換後的javascript看起來都一樣。在構造函數或聲明中初始化變量

export class MyClass extends React.Component<iProps, {}> { 
     private myName: string = "Hello"; 

     constructor(props: iProps) { 
     super(props); 

     this.myName= "Hello"; 
     } 
} 
+0

這兩個對我來說都是錯誤的,因爲道具的意義在於,他們每次渲染都會被傳入一次,而不是在第一次構建類時。 –

+0

最初的道具傳遞給ctor,所以是兩種方式都應該工作。這裏可能沒有對錯,但我總是更喜歡在ctor中設置成員值,因爲它使代碼在我看來更容易理解。 –

+0

@TomFenech - 是的,我刪除了問題中的道具。 – Lambert

回答

1

這是完全一樣的,例如:

class MyClass1 { 
     private myName: string = "Hello"; 
} 

編譯爲:

var MyClass1 = (function() { 
    function MyClass1() { 
     this.myName = "Hello"; 
    } 
    return MyClass1; 
}()); 

和:

class MyClass2 { 
     private myName: string; 

     constructor() { 
     this.myName = "Hello"; 
     } 
} 

編譯爲:

var MyClass2 = (function() { 
    function MyClass2() { 
     this.myName = "Hello"; 
    } 
    return MyClass2; 
}()); 

code in playground

正如你所看到的編譯版本是相同的(除了類名)。
所以你可以使用哪一個你覺得更優雅。

至於反應,你可以使用傳遞給構造函數的道具。
當使用帶反應分量的es6樣式類時,您的初始狀態將在構造函數中分配,而不是使用getInitialState方法。
如果你的初始狀態是道具的函數,那麼你需要在構造函數中使用它們。