React ES6類組件的剖析

Question

我試圖遵循React中的一些最佳實踐，並且想知道使用ES6類時React組件的結構以及在哪里聲明事物，特別是類或.js文件將要使用的變量或屬性。

我在這里閱讀了各種答案，並且發現了以下幾點：

1. 無法在ES6中直接在類上初始化屬性，當前只能以這種方式聲明方法。 同樣的規則也適用於ES7。

https://stackoverflow.com/a/38269333/4942980

2. 每次渲染時都會在render方法中創建一個函數，這對性能影響不大。 如果將它們放在渲染中也很混亂

   ...只建議將渲染函數放到專門處理渲染組件和/或JSX的函數中（例如，在prop上進行映射，根據prop來有條件地加載適當組件的switch語句等）。 如果該函數背后的邏輯比較繁瑣，則將其保留在渲染之外。

https://stackoverflow.com/a/41369330/4942980

https://stackoverflow.com/a/42645492/4942980

3. 此外，構造函數應只創建和初始化一個新實例。 它應該設置數據結構和所有特定於實例的屬性，但不執行任何任務。

https://stackoverflow.com/a/24686979/4942980

這是否意味着該類的所有不是方法且不屬於render變量都屬於類構造函數？

我的理解是：

class Counter {
   constructor(){
     this.count = 0;
   }
}

與此相同：

class Counter {
   count = 0;
}

資料來源： https : //stackoverflow.com/a/47960459/4942980

我見過我的朋友寫這樣的代碼：

let count = 0;

class Counter extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <span>{count}</span>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById("root"));

也就是說，它們用於用let/const/var聲明變量，並在類外部聲明屬性（在這種情況下為變量），然后根據需要將其粘貼在類中，因此.js文件中填充了變量和有時，調用方法的類是方法，然后是方法。

來自更面向對象的背景，在我看來這是錯誤的嗎？ 他們正確嗎？ 所有屬性應該放在構造函數中還是在類上（如果它們不顯式處理渲染）還是在render方法中（如果可以）？ 還是使用諸如let這樣的變量關鍵字進行聲明然后將它們放入類中，是構造函數，render方法等（根據需要使用它們的作用域）是否合適？ 如果每個.js文件只有一個類，這是否差不多？

謝謝！

Answer 1

這是否意味着該類的所有不是方法且不屬於render的變量都屬於類構造函數？

對於本機JS（換句話說，瀏覽器已標准化並支持的ES語法）而言，這是正確的，但是對於TypeScript，您將使用類屬性 （並且您可以使用Babel進行相同的操作）：

class Counter {
   count = 0;
}

這是第3階段ES建議語法 。 考慮到幾乎每個人都在React中使用Babel或TypeScript的事實，我很驚訝仍然廣泛建議將類屬性和綁定方法放在構造函數中的想法，這僅在舊代碼中是必需的。 我個人使用TypeScript，幾乎從來沒有這樣做。

在TypeScript中聲明類屬性特別有用，因為這是您定義類類型本身的方式（即count是Counter的屬性）。 否則，您需要處理類型錯誤：

class Counter {
  constructor() {
    this.count = 3; // Error: Property 'count' does not exist on type 'Counter'.
  }
}

我見過我的朋友寫這樣的代碼：

 let count = 0; class Counter extends React.Component { constructor(props) { super(props); } render() { return ( <span>{count}</span> ) } } 

也就是說，它們用於用let / const / var聲明變量，並在類外部聲明屬性（在這種情況下為變量），然后根據需要將其粘貼在類中

是的，那看起來不對。

那是在模塊范圍（ 不是類實例范圍）中定義一個屬性。 不建議從render()引用組件外部的內容。 您應該嘗試使組件保持純凈（僅基於this.props和this.state渲染）。

在類外使用let或const與在類上聲明靜態內容大致相同：

class Counter {
  static count = 0;
}

每個Counter都可以訪問相同的共享Counter.count變量。 可能有一個用例，但以我的經驗在React中很少見。