React 開發者常見的 3 個錯誤

關於前端開發，我最開心的事情就是總有新的東西能夠學習。但咱們可能一生都在掌握各類編程語言、庫和框架，但仍然一無所知。

由於咱們都在學習，這也意味着咱們都容易犯錯誤。不要緊，咱們的目的是變得更好。若是你犯了一個錯誤並從中吸收教訓，你就作得很好！可是若是你沒有學到任何新的東西，而且不斷重複犯一樣的錯誤，emmm。。。可能你的職業生涯就會停滯不前。

本着這種精神，下面是我在 CodeReview 初級開發同窗時常常看到的三個錯誤。咱們一塊兒來 check 一下，而後討論如何改正它。

直接修改狀態

在更新 React 組件狀態時，最重要的是調用 setState 方法去更新，而且傳入的對象是一個新的副本，而不是直接修改以前的狀態。若是你錯誤地修改了組件的狀態，React Diff 算法將沒法捕獲更改，並且你的組件也沒法正確地更新。讓咱們來看一個例子。

假設你有這樣的狀態:

this.state = {    colors: ['red', 'green', 'blue']}

如今你想要給這個數組添加顏色：

// 方法1：this.state.colors.push('yellow’)// 方法2：this.state.colors = [...this.state.colors, 'yellow’]

這兩種方法都是錯誤的！在更新類組件中的狀態時，必須使用 setState 方法，而且應該注意不要改變原始對象。下面是添加元素到數組的正確方法:

this.setState(prevState => ({ colors: [...prevState.colors, 'yellow'] }))

忘記了 setState 的批量更新

setState 有兩種使用方法。第一種方法是傳入一個對象做參數。第二種方法是傳入一個函數做參數。你知道這兩種方法分別應該在何時使用嗎？

例如，若是你有一個能夠啓用或禁用的按鈕，那麼你可能會有一個名爲 isDisabled 的狀態，其中包含一個布爾值。若是你想切換這個按鈕的狀態，你可能很會寫這樣的一段代碼：

// setState 使用一個對象做參數this.setState({ isDisabled: !this.state.isDisabled })

那麼，這有什麼問題呢？問題在於 React 狀態更新能夠批處理（batchUpdate），這意味着多個狀態更新能夠在一個更新週期中發生。若是你的更新將被批處理，而且你對 isDisabled 狀態有多個更新，那麼最終結果可能不是你所指望的。

更新狀態的更正確的方法是提供前一個狀態的函數做爲參數:

this.setState(prevState => ({ isDisabled: !prevState.isDisabled }))

如今，即便你的狀態更新被批處理，而且有多個更新都在操做 isDisabled 狀態，但每一個更新都依賴於正確的先前狀態，所以你老是會獲得預期的結果。

相似的遞增計數器也是如此。

// 不要這樣作this.setState({ counterValue: this.state.counterValue + 1 })// 正確的寫法this.setState(prevState => ({ counterValue: prevState.counterValue + 1 }))

忘記了 setState 是異步的

最後，記住 setState 是一種異步方法是很重要的。

初學者能夠先理解成異步，但嚴格意義上說，須要區分條件來看。

如：在 React 內部生命週期以及事件處理函數中是異步的。

如：在 setTimeout 函數中調用 setState 倒是同步的。

舉個例子，假設咱們有一個以下狀態的 React 組件:

this.state = { name: 'John' }

有一個方法更新狀態，並將新的狀態打印到控制檯上:

this.setState({ name: 'Matt' })console.log(this.state.name)

你可能認爲打印出來的會是 Matt ，但它不會! 它會打印 John ！

這是由於 setState 是異步的。這意味着執行到 setState 時，會把真正更新的操做放在異步隊列中去執行，但它下面的同步代碼將當即執行，因此打印出來的 state 就不是最新的。

若是你想拿到更新完成後的最新狀態，React 容許你傳一個回調函數，該函數會在更新完成後運行。

this.setState({ name: 'Matt' }, () => console.log(this.state.name))

問題解決了! 如今它能夠正確地記錄 Matt 了。

總結

好了！以上就是今天給你們分享的 React 中的三個常見錯誤及其糾正方法。記住，犯錯誤是正常的，但要避免犯一樣的錯誤。你在學習、我在學習、咱們都在學習。讓咱們繼續學習，一塊兒變得更好。