Question

反应16.7具有状态挂钩，因此我在任何情况下都可以使用函数组件代替类组件，对吗？ https://reactjs.org/docs/hooks-state.html

Answer 1

实际上，使用钩子时有一些规则：不要在循环，条件或嵌套函数内调用钩子，也不要从常规JavaScript函数中调用钩子。

您可以在此处阅读以下规则和说明：https://reactjs.org/docs/hooks-rules.html

这是官方的解释。

我们的目标是让Hooks尽快涵盖类的所有用例。目前还没有对应于不常见的getSnapshotBeforeUpdate和componentDidCatch生命周期的Hook等效项，但我们计划尽快添加它们。对于Hooks来说还为时过早，因此某些集成（例如DevTools支持或Flow / TypeScript类型输入）可能尚未准备好。目前某些第三方库可能也与Hooks不兼容。

Answer 2

useState钩子旨在代替类组件中的this.state：

this.state = { foo: 1, bar: 2 };

要么成为

const [foo, setFoo] = useState(1);
const [bar, setBar] = useState(2);

或

const [state, setState] = useState({ foo: 1, bar: 2 });

在第二种情况下，应该将setState won't merge state properties with previous state考虑在内，除非明确进行了以下操作：

与在类组件中找到的setState方法不同，useState可以不会自动合并更新对象。您可以复制此通过将功能更新程序形式与对象传播相结合来实现行为语法：
setState(prevState => ({...prevState, ...updatedValues});

正如另一个答案所解释的那样，局限性在于每次调用功能组件时useState调用的顺序应该相同，因为顺序是框架识别组件状态的唯一方法。

如果出于某种原因需要在组件外部访问状态，则可能会出现问题。调试，测试或特定情况。正如the documentation所解释的那样，功能组件中的状态应该通过其副作用进行测试，而不是直接声明状态。

Answer 3

在大多数情况下，可以使用React Hooks +功能组件来代替类组件，除非需要以下情况：

某些生命周期方法-您需要使用getSnapshotBeforeUpdate和componentDidCatch生命周期。正如Dan所说，没有Hook等价于罕见的getSnapshotBeforeUpdate 和componentDidCatch生命周期。
可调试性-您需要良好的组件可调试性。目前，使用useState创建的状态不会像React Devtools中通常的键值方式那样显示。它以React用于内部表示函数状态的格式显示。
测试-在酶测试中，您可以手动设置要测试的组件的状态。您无法使用状态挂钩来执行此操作，因为状态位于组件外部。您也不能断言组件状态。

React 16.7具有状态挂钩，在任何情况下都可以使用功能组件而不是类组件吗？

3 个答案: