【React】关于React Hooks

2 年 ago
逸, 科
1 minute

首先

本文是一个刚开始学习编程一个月的初学者对于学习过程中遇到的问题进行调查整理并同时记录下来的一份备忘录。
因此，文章内容可能包含错误之处，请谅解。
如果您发现错误，请不吝指正，不胜感激。

React 初学者指南

React Hooks是什么

以前，状态和生命周期只能在类组件中使用，但现在函数组件也可以使用这些功能了。通过使用钩子（Hook），我们可以更简洁地编写代码。

以下是主要亮点的概述。

使用useState()
使用useEffect()

使用useState的方法

您可以在函数组件中使用本地状态。

// useStateをインポート
import React, { useState } from 'react';

// 宣言
const [state変数名, state更新関数名] = useState(state初期値)

// stateの呼び出し
{ state変数名 }

使用useEffect的方法。

作为生命周期方法的替代，可以在函数组件中使用。
具体来说，可以用作以下方法的替代：
componentDidMount()
componentDidUpdate()
componentWillUnmount()

// レンダー毎に実行する場合
useEffect(() => {
  // コンポーネントがレンダーされる時（再レンダー含む）に実行
  return () => {
    // コンポーネントが破棄される時に実行
  }
})

// マウント時のみ実行する場合
useEffect(() => {
  // コンポーネントがレンダーされる時に実行
}, [])

// 特定のstateやpropsが更新された時に実行する場合
useEffect(() => {
  // コンポーネントがレンダーされる時に実行される。
  return () => {
    // コンポーネントが破棄される時に実行される。
  }
}, [変更されるstateやprops])


// マウント時とアンマウント時のみ実行する場合
useEffect(() => {
  // コンポーネントがレンダーされる時に実行される。
  return () => {
    // コンポーネントが破棄される時に実行される。
  }
}, [])

总结

    • hookはstateやライフサイクルを関数コンポーネントでも使えるようになる機能

 

    • useState()はstateの代替

 

    useEffect()はライフサイクルメソッドの代替
bannerAds