useNavigationState

useNavigationState 是一個 Hook，它可以取得包含畫面導航程式的導航狀態。在極少數情況下，如果你想依據導航狀態來呈現某種東西，這會很有用。

警告

請把導航程式的狀態物件視為內部物件，且在次要版本中可能會變更。除 導航狀態 狀態物件的 index 和 routes 外，避免使用此狀態物件的屬性，除非你真的需要它。如果你有一些功能是在不依賴狀態物件的結構時無法達成的，請開啟一個問題。

它會將一個選擇器函式當成參數。選擇器會收到完整的導航狀態，並能從狀態中傳回特定值

const index = useNavigationState((state) => state.index);

選擇器函式有助於減少不必要的重新渲染，因此，只有在你關心的部分被更新時，你的畫面才會重新渲染。如果你實際上需要整個狀態物件，你可以明確這樣做

const state = useNavigationState((state) => state);

警告

這個 Hook 對於進階狀況很有用，如果你不小心，則很容易產生效能問題。對於大多數情況，你不需要導航程式的狀態。

useNavigationState 和 navigation.getState() 有何不同？

navigation.getState() 函式也會傳回目前的 導覽狀態。主要的差別在於 useNavigationState 勾子會在值變更時觸發重新渲染，而 navigation.getState() 則不會。例如，以下程式碼是錯誤的

function Profile() {
  const routesLength = navigation.getState().routes.length; // Don't do this

  return <Text>Number of routes: {routesLength}</Text>;
}

在此範例中，即使您推入一個新畫面，這段文字仍不會更新。如果您使用勾子，它會按照預期運作

function Profile() {
  const routesLength = useNavigationState((state) => state.routes.length);

  return <Text>Number of routes: {routesLength}</Text>;
}

因此，您在什麼情況下使用 navigation.getState()？它主要用於不關心所渲染內容的事件監聽程式內。在多數情況下，比較建議使用勾子。

與類別元件一起使用

您可以將類別元件包裝在函式元件中以使用勾子

class Profile extends React.Component {
  render() {
    // Get it from props
    const { routesLength } = this.props;
  }
}

// Wrap and export
export default function (props) {
  const routesLength = useNavigationState((state) => state.routes.length);

  return <Profile {...props} routesLength={routesLength} />;
}