优点
- 代码可读性更强。原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护。例如，每个生命周期中常常会包含一些不相关的逻辑。一般我们都会在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致
- 不再考虑this的问题。
- 组织树层级变浅。（这个我没用过，还不会）
缺点
-
类组件的一些钩子函数并没有实现。
getSnapshotBeforeUpdate和componentDidCatch。 在 getSnapshotBeforeUpdate() 方法中，我们可以访问更新前的 props 和 state。 getSnapshotBeforeUpdate() 方法需要与 componentDidUpdate() 方法一起使用，否则会出现错误。componentDidCatch可以看官方文档。 -
状态不同步。下面的代码先点击第二个按钮，让其在三秒后输出counter的值，再点击click me按钮，此时counter变成了1。我们理想的三秒后输出的结果是1，但是实际上是0。这个就hooks状态不同步的问题。类组件的setState()就不会有这个问题。再hooks中可以使用useRef的current这种方式来赋值。
import React, { useState } from "react";
const Counter = () => {
const [counter, setCounter] = useState(0);
const onAlertButtonClick = () => {
setTimeout(() => {
alert("Value: " + counter);
}, 3000);
};
return (
<div>
<p>You clicked {counter} times.</p>
<button onClick={() => setCounter(counter + 1)}>Click me</button>
<button onClick={onAlertButtonClick}>
Show me the value in 3 seconds
</button>
</div>
);
};
export default Counter;
注意点
在使用hooks的过程中可以使用eslint-plugin-react-hooks来看使用hooks的过程中产生的错误。 可以看这个博主的blog.csdn.net/hsany330/ar…
