React useEffect在第一次加载和后续更新时具有不同的行为

Question

我使用带有typescript的React，我想将类组件转换为功能组件，但我的类组件有两种不同的componentDidMount和comonentDidUpdate行为：

componentDidMount() {
this.props.turnResetOff();
}
componentDidUpdate() {
if (this.props.resetForm) {
this.resetChangeForm();
this.props.turnResetOff();
}
}

我只想让我的表单在每次加载时重置，除了第一次，因为我有一个下拉菜单，可以清除表单，但我希望数据在装载时不重置。

我试着在React函数/Hooks组件上使用componentDidMount等效组件？

const turnResetOff = props.turnResetOff;// a function
const resetForm = props.resetForm;
const setPersonId = props.setPersonId;// a function
useEffect(() => {
turnResetOff();
}, [turnResetOff]);
useEffect(() => {
const resetChangeForm = () => {/*definition*/};
if (resetForm) {
resetChangeForm();
turnResetOff();
}
}, [resetForm, turnResetOff, setPersonId]);

但是，这会导致无限的重新渲染。即使我使用回调来关闭ResetOff:

turnResetOff={useCallback(() => {
if (shouldReset) {
setShouldReset(false);
}
}, [shouldReset])}

我还尝试使用useRef来计算它被渲染的次数，结果相同(无限重渲染-这甚至是一个简化版本(。

const [shouldReset, setShouldReset] = useState<boolean>(false);
const mountedTrackerRef = useRef(false);
useEffect(() => {
if (mountedTrackerRef.current === false) {
console.log("mounted now!");
mountedTrackerRef.current = true;
// props.turnResetOff();
setShouldReset(false);
} else {
console.log("mounted already... updating");
// if (props.resetForm) {
if (shouldReset) {
// resetChangeForm();
// props.turnResetOff();
setShouldReset(false);
}
}
}, [mountedTrackerRef, shouldReset]);

Answer 1

当您调用useEffect()时，您可以返回一个清理函数。该清理函数在组件卸载时被调用。所以，也许你想做的是：当你被turnResetOff调用时，然后调用它，并返回一个调用turnResetOff的函数。返回函数将在组件卸载时调用，因此下次组件装载时不会重置。

沿着这些路线：

useEffect(
() => {
turnResetOff()
return () => {setShouldReset(false)}
}
,[turnResetOff, setShouldReset])

Answer 2

使用类组件中的逻辑，fellowing应该在功能组件中为您提供相同的行为

const turnResetOff = props.turnResetOff;// a function
const resetForm = props.resetForm;
const setPersonId = props.setPersonId;// a function
// useEffect with an empty dependency array is identical to ComponentDidMount event
useEffect(() => {
turnResetOff();
}, []);
// Just need resetForm as dependency since only resetForm was checked in the componentDidUpdate
useEffect(() => {
const resetChangeForm = () => {/*definition*/};
if (resetForm) {
resetChangeForm();
turnResetOff();
}
}, [resetForm]);