我可以在useEffect钩子中设置状态吗

假设我有一个依赖于另一个状态的状态(例如当A改变时，我希望B改变)。

创建一个观察a并在useEffect钩子中设置B的钩子是否合适?

效果是否会级联，当我点击按钮时，第一个效果会触发，导致b改变，导致第二个效果触发，在下一次渲染之前?这样构造代码在性能上有什么缺点吗?

let MyComponent = props => {
let [a, setA] = useState(1)
let [b, setB] = useState(2)
useEffect(
() => {
if (/*some stuff is true*/) {
setB(3)
}
},
[a],
)
useEffect(
() => {
// do some stuff
},
[b],
)


return (
<button
onClick={() => {
setA(5)
}}
>
click me
</button>
)
}
320446 次浏览
小开
最佳答案

效果总是在渲染阶段完成后执行，即使你在一个效果内设置了状态，另一个效果将读取更新的状态并在渲染阶段后对其采取行动。

话虽如此，最好还是以同样的效果执行这两个操作，除非有可能b会由于changing a以外的原因而改变，在这种情况下，你也会希望执行相同的逻辑

小开

一般来说，在useEffect中使用setState将创建一个无限循环，这很可能是你不想引起的。这个规则有几个例外，我稍后会讲到。

useEffect在每次渲染后被调用，当setState在其中使用时，它将导致组件重新渲染，并调用useEffect，等等。

在useEffect中使用useState不会导致无限循环的一种流行情况是，当你将一个空数组作为第二个参数传递给useEffect时，比如useEffect(() => {....}, [])，这意味着effect函数应该被调用一次:只在第一次mount/render之后。当您在组件中进行数据获取并且希望将请求数据保存在组件的状态时，这种方法被广泛使用。

小开

useEffect可以钩住某个道具或状态。所以，为了避免无限循环钩子，你需要做的事情是绑定一些变量或状态到效果

例如:

useEffect(myeffectCallback, [])

上述效果只会在组件渲染后触发。这类似于componentDidMount生命周期

const [something, setSomething] = withState(0)
const [myState, setMyState] = withState(0)
useEffect(() => {
setSomething(0)
}, myState)

上面的效果只会触发我的状态已经改变，这与componentDidUpdate类似，只是不是每个变化的状态都会触发它。

你可以通过链接阅读更多细节

小开

为了将来的目的，这可能也有帮助:

在useEffect中使用setState是可以的，你只需要注意不创建循环。

但这并不是可能发生的唯一问题。见下文:

假设你有一个组件Comp，它从父组件那里接收props，根据props的变化，你想要设置Comp的状态。出于某种原因，你需要为不同useEffect中的每个道具进行更改:

不要这样做

useEffect(() => {
setState({ ...state, a: props.a });
}, [props.a]);


useEffect(() => {
setState({ ...state, b: props.b });
}, [props.b]);
它可能永远不会改变a的状态，正如你在这个例子中看到的: https://codesandbox.io/s/confident-lederberg-dtx7w < / p >

在这个例子中发生这种情况的原因是，当你同时更改prop.a和prop.b时，两个useEffects在同一个react周期中运行的值在useEffect中是完全相同的，因为它们处于相同的上下文中。当你运行第二个setState时，它将取代第一个setState。

而是这样做

这个问题的解决方案基本上是像这样调用setState:

useEffect(() => {
setState(state => ({ ...state, a: props.a }));
}, [props.a]);


useEffect(() => {
setState(state => ({ ...state, b: props.b }));
}, [props.b]);

在这里检查解决方案:https://codesandbox.io/s/mutable-surf-nynlx

现在，当你继续setState时，你总是会收到状态的最新和正确的值。

我希望这能帮助到一些人!

小开

▶1。我可以在useEffect钩子中设置状态吗?

原则上，你可以在你需要的地方自由设置状态——包括在useEffect和即使在渲染过程中中。只要确保通过正确设置Hook deps和/或有条件地设置状态来避免无限循环。

▶2。假设我有一个依赖于另一个状态的状态。创建一个观察a并在useEffect钩子中设置B的钩子是否合适?

你刚刚描述了useReducer的的经典用例:

当你有包含多个sub-values的复杂的国家逻辑，或者当下一个状态依赖于前一个状态时，useReducer通常比useState更可取。(反应文档)

当将状态变量取决于设置为另一个状态变量的当前值时，您可能想要尝试用useReducer替换它们。 […当你发现自己写作 setSomething(something => ...)时，是时候考虑使用减速机了。(Dan Abramov，过度反应博客) < / p > 

let MyComponent = () => {
let [state, dispatch] = useReducer(reducer, { a: 1, b: 2 });


useEffect(() => {
console.log("Some effect with B");
}, [state.b]);


return (
<div>
<p>A: {state.a}, B: {state.b}</p>
<button onClick={() => dispatch({ type: "SET_A", payload: 5 })}>
Set A to 5 and Check B
</button>
<button onClick={() => dispatch({ type: "INCREMENT_B" })}>
Increment B
</button>
</div>
);
};


// B depends on A. If B >= A, then reset B to 1.
function reducer(state, { type, payload }) {
const someCondition = state.b >= state.a;


if (type === "SET_A")
return someCondition ? { a: payload, b: 1 } : { ...state, a: payload };
else if (type === "INCREMENT_B") return { ...state, b: state.b + 1 };
return state;
}


ReactDOM.render(<MyComponent />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect } = React</script>

▶3。效果是否会级联，当我点击按钮时，第一个效果会触发，导致b改变，导致第二个效果触发，在下一次渲染之前?

useEffect总是运行后，提交渲染并应用DOM更改。第一个效果触发，改变b并导致重新渲染。在此渲染完成后，由于b的变化，第二个效果将运行。

let MyComponent = props => {
console.log("render");
let [a, setA] = useState(1);
let [b, setB] = useState(2);


let isFirstRender = useRef(true);


useEffect(() => {
console.log("useEffect a, value:", a);
if (isFirstRender.current) isFirstRender.current = false;
else setB(3);
return () => {
console.log("unmount useEffect a, value:", a);
};
}, [a]);
useEffect(() => {
console.log("useEffect b, value:", b);
return () => {
console.log("unmount useEffect b, value:", b);
};
}, [b]);


return (
<div>
<p>a: {a}, b: {b}</p>
<button
onClick={() => {
console.log("Clicked!");
setA(5);
}}
>
click me
</button>
</div>
);
};


ReactDOM.render(<MyComponent />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

▶4。这样构造代码在性能上有什么缺点吗?

是的。通过将b的状态更改包装在a的单独useEffect中，浏览器有了额外的布局/绘制阶段——这些效果可能对用户可见。如果你不想尝试useReducer，你可以直接改变b状态和a:

let MyComponent = () => {
console.log("render");
let [a, setA] = useState(1);
let [b, setB] = useState(2);


useEffect(() => {
console.log("useEffect b, value:", b);
return () => {
console.log("unmount useEffect b, value:", b);
};
}, [b]);


const handleClick = () => {
console.log("Clicked!");
setA(5);
b >= 5 ? setB(1) : setB(b + 1);
};


return (
<div>
<p>
a: {a}, b: {b}
</p>
<button onClick={handleClick}>click me</button>
</div>
);
};


ReactDOM.render(<MyComponent />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

小开

尝试将设置状态包装在if语句中，该语句检查状态是否需要更改-如果是，则更改它，否则return () => {}

例如,

useEffect(() => {
if(a.currentCondition !== a.desiredCondition) {
setA();
}
return cleanup;
}, [b])

提交答案