使用 useEffect 对状态变化做出反应答案

【问题标题】：Using useEffect to react to state changes使用 useEffect 对状态变化做出反应
【发布时间】：2020-07-26 16:05:12
【问题描述】：

我对钩子有点陌生，而且我正在使用一种我不知道是否可取的模式。我正在做的是将 redux 与 useEffect 钩子混合在一起，这样对于每一个有意义的状态变化，我的一个钩子都会被触发并更新一些状态。

例如，如果我的减速器中有一个错误字段。我写的是这样的。

useEffect(() => {
    if(state.error && !state.error.open) {
      showSnackbar(state.error.text)
    }
}, [state.error])

当用户关闭快餐栏时，我会清除错误。

或者

如果我想通过一些数据获取和更改页面来响应按钮单击：

（我明确设置用户点击的原因是当用户点击下一页中的后退按钮时，我不会再次重定向到该页面，因为数据仍然存在于存储中。）

useEffect(() => {
   if(buttonClicked && state.someData.id > 0) {
    history.push('/route');
}
}, [state.someData, buttonClicked]);


handleClick = () => {
    dispatch(actions.fetchSomeData());
    setUserClicked();
}

在我的组件中，有时我有 7-8 个 useEffects 处理不同的事情，其中大多数都有条件行为。

我经常看到这样的代码：

const result = await dispatch(someAction);
if (result.payload.error)
{
 //...
}
else
{
 history.push(...);
}

与使用多个生命周期挂钩相比，这种模式是否有一些优势？

也许我使用第一种方式是因为它感觉更具声明性？但是有很多 useEffects 是不是很好？在上面的代码中，我在两个钩子中处理了错误和成功。

谢谢。

【问题讨论】：

您可以根据组件的需要使用尽可能多的效果。我还认为在按钮 onClick 事件上使用 preventDefault 可能会对您有所帮助。第二种模式是我看到更多用于异步 redux 操作的东西，例如用于获取数据的 API 调用，通常与 Thunks (redux-thunk) 之类的中间件一起使用，但这通常是为了允许在获取请求时将错误直接返回给 UI /处理逻辑与组件代码解耦。
我使用 preventDefault 但为了简洁起见我删除了这些部分。我使用 useEffects 的主要用例是为了响应状态变化（无论是异步还是同步）执行一些操作。大多数时候它们在我的容器中而不是组件中。我的意思是，我不是等待异步操作来获取响应并使用该响应来触发另一个操作，而是将事件侦听器（useEffect）连接到该特定数据，当它被填充时，我会触发另一个操作。没事吧？
当然。这就是效果的用途；对其依赖数组中值的任何更改都会触发它们运行副作用回调。

标签： reactjs react-redux react-hooks

【解决方案1】：

如果你写了太多useEffect，那就是你的组件太大的隐含指标。您应该开始考虑创建更小的功能/无状态组件（无需渲染任何标记）。每个组件的几页代码是结构良好的代码的最大大小。更新：这里是没有效果的代码：

if(buttonClicked && state.someData.id > 0) {
    return <Redirect to="/route" />
}

handleClick = () => {
    dispatch(actions.fetchSomeData());
    setUserClicked();
}

【讨论】：

现在检查我的代码。我在一个文件中最多有 10 个 useEffects，我的代码在一个组件中的最大大小约为 300-350 行。我认为根据您的回答应该可以吗？我担心在这类任务中使用 useEffect 是不合适的。
如果你摆脱 useEffect 并且在渲染之前只进行常规 if 检查，它应该可以正常工作：` if(buttonClicked && state.someData.id > 0) { return } ` 您可能正在使用不需要的效果。