Question

因此，有两种使用React钩子的方法：

直接

<androidx.appcompat.widget.Toolbar
        android:id="@+id/actionbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/back_button"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/ic_arrow_back_black_24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="LOGO"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.appcompat.widget.Toolbar>

在HOC中

const Signup = props => {
  const [onSubmit, {data}] = useMutation (SIGNUP_GQL)
  return (
    ...
  )
}
export default Signup

我更喜欢第二种模式。在以这种方式构建整个应用程序之前，我想确保它没有问题。特别是，这两种模式在本质上是否相等（与实现无关），如果不相同，则是否使用HOC中的挂钩完全支持该实现。

干杯！

Answer 1

HOC的主要目的之一是能够创建可重用的逻辑，并将其轻松地注入到任何组件中。当没有钩子时，唯一可行的方法是通过渲染道具模式。

有了钩子，您现在可以完成HOC所需的大部分工作。甚至所有具有复杂逻辑的流行React库都可以重构为使用钩子。例如：#include <iostream> using namespace std; int main() { int rows, count = 0, count1 = 0, k = 0; cout << "Please enter the number of rows." << endl; cin >> rows; while (rows > 9) { cout << "That is an invalid selection, please choose up to 9 rows." << endl; cin >> rows; } for (int i = 1; i <= rows; ++i) { for (int space = 1; space <= rows - i; ++space) { cout << " "; ++count; } while (k != 2 * i - 1) { if (count <= rows - 1) { cout << i << " "; ++count; } k++; } count1 = count = k = 0; cout << endl; } }，react-apollo等

在大多数情况下，与HOC相比，挂钩应具有较低的开销，从而使其性能更高。 Reference

此外，通过将组件编写为函数，还可以帮助Minifier更好地压缩代码，从而使包更小，这也是一件好事。 Reference

但是，并不是说类组件不再有用。在某些情况下，使用钩子目前尚无法实现某些情况，例如进行react-router，componentDidCatch之类的事情，但是在大多数情况下，钩子+函数组件应该足够。

就挂钩而言，所谓的HOC等同于常规组件吗？

1 个答案: