0

React 16.7 有 State Hook，所以我可以在任何情况下使用函数组件而不是类组件，对吗？ https://reactjs.org/docs/hooks-state.html

4

3 回答 3

2

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

你可以在这里阅读这些规则和解释：https ://reactjs.org/docs/hooks-rules.html

这是官方的解释。

我们的目标是让 Hooks 尽快涵盖类的所有用例。目前还没有不常见的 getSnapshotBeforeUpdate 和 componentDidCatch 生命周期的 Hook 等价物，但我们计划很快添加它们。对于 Hooks 来说，现在还处于非常早期的阶段，因此一些集成（例如 DevTools 支持或 Flow/TypeScript 类型）可能还没有准备好。目前，一些第三方库也可能与 Hooks 不兼容。

于 2018-11-04T07:01:59.320 回答
1

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 不会将 state 属性与先前的 state 合并，除非这是明确完成的：

与类组件中的 setState 方法不同，useState 不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法相结合来复制此行为：

setState(prevState => ({...prevState, ...updatedValues});

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

如果由于某些原因（例如调试、测试或特定情况）需要在组件外部访问状态，则可能会出现问题。正如文档所解释的，功能组件中的状态应该通过其副作用进行测试，而不是直接断言状态。

于 2018-11-04T08:37:03.883 回答
1

在大多数情况下，您可以使用 React Hooks + 函数式组件作为类组件的替代品，除非在以下情况下需要：

  • 某些生命周期方法- 您需要使用getSnapshotBeforeUpdate和componentDidCatch生命周期。正如 Dan 所说，目前还没有与 uncommongetSnapshotBeforeUpdate 和componentDidCatch生命周期等效的 Hook。

  • 可调试性- 您需要良好的组件可调试性。目前，使用创建useState的状态不像 React Devtools 中通常的键值方式那样显示。它以 React 用来在内部表示函数状态的格式显示。

  • 测试- 在酶测试中，您可以手动设置正在测试的组件的状态。你不能用状态钩子来做到这一点，因为状态存在于组件之外。您也不能断言组件状态。

于 2018-11-11T07:15:42.800 回答