使React useEffect钩子在初始渲染时不运行

根据文件:

componentDidUpdate()在更新发生后立即被调用。初始呈现时不调用此方法。

我们可以使用新的useEffect()钩子来模拟componentDidUpdate()，但似乎每次渲染后都要运行useEffect()，甚至是第一次渲染。我如何让它在初始渲染时不运行?

正如你在下面的例子中看到的，componentDidUpdateFunction在初始渲染期间被打印，而componentDidUpdateClass在初始渲染期间没有被打印。

function ComponentDidUpdateFunction() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log("componentDidUpdateFunction");
});


return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}


class ComponentDidUpdateClass extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}


componentDidUpdate() {
console.log("componentDidUpdateClass");
}


render() {
return (
<div>
<p>componentDidUpdateClass: {this.state.count} times</p>
<button
onClick={() => {
this.setState({ count: this.state.count + 1 });
}}
>
Click Me
</button>
</div>
);
}
}


ReactDOM.render(
<div>
<ComponentDidUpdateFunction />
<ComponentDidUpdateClass />
</div>,
document.querySelector("#app")
);
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>


<div id="app"></div>

225754 次浏览
小开
最佳答案

我们可以使用useRef钩子来存储任何我们喜欢的可变值，所以我们可以使用它来跟踪是否是useEffect函数第一次运行。

如果我们希望效果运行在与componentDidUpdate相同的阶段中，可以使用useLayoutEffect代替。

例子

const { useState, useRef, useLayoutEffect } = React;


function ComponentDidUpdateFunction() {
const [count, setCount] = useState(0);


const firstUpdate = useRef(true);
useLayoutEffect(() => {
if (firstUpdate.current) {
firstUpdate.current = false;
return;
}


console.log("componentDidUpdateFunction");
});


return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}


ReactDOM.render(
<ComponentDidUpdateFunction />,
document.getElementById("app")
);
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>


<div id="app"></div>

小开

你可以把它变成自定义钩子，像这样:

import React, { useEffect, useRef } from 'react';


const useDidMountEffect = (func, deps) => {
const didMount = useRef(false);


useEffect(() => {
if (didMount.current) func();
else didMount.current = true;
}, deps);
}


export default useDidMountEffect;

使用的例子:

import React, { useState, useEffect } from 'react';


import useDidMountEffect from '../path/to/useDidMountEffect';


const MyComponent = (props) => {
const [state, setState] = useState({
key: false
});


useEffect(() => {
// you know what is this, don't you?
}, []);


useDidMountEffect(() => {
// react please run me if 'key' changes, but not on initial render
}, [state.key]);


return (
<div>
...
</div>
);
}
// ...
小开

@MehdiDehghani，你的解决方案工作得很好，你必须做的一件事是卸载，将didMount.current值重置为false。当你试图在其他地方使用这个自定义钩子时，你不会得到缓存值。

import React, { useEffect, useRef } from 'react';


const useDidMountEffect = (func, deps) => {
const didMount = useRef(false);


useEffect(() => {
let unmount;
if (didMount.current) unmount = func();
else didMount.current = true;


return () => {
didMount.current = false;
unmount && unmount();
}
}, deps);
}


export default useDidMountEffect;
小开

@ravi，你的没有调用传入的卸载函数。下面是一个更完整的版本:

/**
* Identical to React.useEffect, except that it never runs on mount. This is
* the equivalent of the componentDidUpdate lifecycle function.
*
* @param {function:function} effect - A useEffect effect.
* @param {array} [dependencies] - useEffect dependency list.
*/
export const useEffectExceptOnMount = (effect, dependencies) => {
const mounted = React.useRef(false);
React.useEffect(() => {
if (mounted.current) {
const unmount = effect();
return () => unmount && unmount();
} else {
mounted.current = true;
}
}, dependencies);


// Reset on unmount for the next mount.
React.useEffect(() => {
return () => mounted.current = false;
}, []);
};

小开

我做了一个简单的useFirstRender钩子来处理像聚焦表单输入这样的情况:

import { useRef, useEffect } from 'react';


export function useFirstRender() {
const firstRender = useRef(true);


useEffect(() => {
firstRender.current = false;
}, []);


return firstRender.current;
}

它开始是true，然后切换到useEffect中的false，只运行一次，再也不会运行。

在你的组件中使用它:

const firstRender = useFirstRender();
const phoneNumberRef = useRef(null);


useEffect(() => {
if (firstRender || errors.phoneNumber) {
phoneNumberRef.current.focus();
}
}, [firstRender, errors.phoneNumber]);

对于你的例子，你只需要使用if (!firstRender) { ...。

小开

这是迄今为止我使用typescript创建的最好的实现。基本上，想法是相同的，使用Ref，但我也考虑了由useEffect返回的回调来执行组件卸载时的清理。

import {
useRef,
EffectCallback,
DependencyList,
useEffect
} from 'react';


/**
* @param effect
* @param dependencies
*
*/
export default function useNoInitialEffect(
effect: EffectCallback,
dependencies?: DependencyList
) {
//Preserving the true by default as initial render cycle
const initialRender = useRef(true);


useEffect(() => {
let effectReturns: void | (() => void) = () => {};


// Updating the ref to false on the first render, causing
// subsequent render to execute the effect
if (initialRender.current) {
initialRender.current = false;
} else {
effectReturns = effect();
}


// Preserving and allowing the Destructor returned by the effect
// to execute on component unmount and perform cleanup if
// required.
if (effectReturns && typeof effectReturns === 'function') {
return effectReturns;
}
return undefined;
}, dependencies);
}

你可以简单地使用它，就像你通常使用useEffect钩子一样，但这一次，它不会在初始渲染时运行。下面是如何使用这个钩子。

useNoInitialEffect(() => {
// perform something, returning callback is supported
}, [a, b]);

如果你使用ESLint并且想为这个自定义钩子使用react-hooks/竭-deps规则:

{
"rules": {
// ...
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "useNoInitialEffect"
}]
}
}
小开

方法与Tholle的回答相同，但使用useState而不是useRef。

const [skipCount, setSkipCount] = useState(true);


...


useEffect(() => {
if (skipCount) setSkipCount(false);
if (!skipCount) runYourFunction();
}, [dependencies])

编辑

虽然这也可以工作，但它涉及到更新状态，这会导致组件重新呈现。如果你组件的所有useEffect调用(以及它的所有子组件调用)都有一个依赖数组，这无关紧要。但请记住，任何没有依赖数组的useEffect (useEffect(() => {...}))将再次运行。

使用和更新useRef将不会导致任何重渲染。

小开

如果你想跳过第一次渲染，你可以创建一个状态“firststrenderdone”;并在useEffect中设置它为true，并使用空依赖列表(类似于didMount)。然后，在你的另一个useEffect中，你可以检查第一个渲染是否已经在做某事之前完成。

const [firstRenderDone, setFirstRenderDone] = useState(false);


//useEffect with empty dependecy list (that works like a componentDidMount)
useEffect(() => {
setFirstRenderDone(true);
}, []);


// your other useEffect (that works as componetDidUpdate)
useEffect(() => {
if(firstRenderDone){
console.log("componentDidUpdateFunction");
}
}, [firstRenderDone]);
小开

前面所有的都是好的，但是考虑到useEffect中的动作可以“跳过”，这可以用一种更简单的方式实现。放置一个基本上不是第一次运行的if条件(或任何其他条件)，并且仍然具有依赖关系。

例如，我有一个案例:

  1. 从API加载数据，但我的标题必须是“加载”;直到日期不存在，所以我有一个数组，在开始时是空的，显示文本"显示"
  2. 使用来自这些API的不同信息来呈现组件。
  3. 用户可以一个一个删除这些信息，甚至所有使tour数组再次为空，作为开始，但这一次API获取已经完成
  4. 一旦旅游列表是空的删除，然后显示另一个标题。

所以我的“解决方案”;是创建另一个useState来创建一个布尔值，仅在数据获取后更改，使useEffect中的另一个条件为真，以便运行另一个同样依赖于巡回长度的函数。

useEffect(() => {
if (isTitle) {
changeTitle(newTitle)
}else{
isSetTitle(true)
}
}, [tours])

这是我的App.js

import React, { useState, useEffect } from 'react'
import Loading from './Loading'
import Tours from './Tours'


const url = 'API url'


let newTours


function App() {
const [loading, setLoading ] = useState(true)
const [tours, setTours] = useState([])
const [isTitle, isSetTitle] = useState(false)
const [title, setTitle] = useState("Our Tours")


const newTitle = "Tours are empty"


const removeTours = (id) => {
newTours = tours.filter(tour => ( tour.id !== id))


return setTours(newTours)
}


const changeTitle = (title) =>{
if(tours.length === 0 && loading === false){
setTitle(title)
}
}


const fetchTours = async () => {
setLoading(true)


try {
const response = await fetch(url)
const tours = await response.json()
setLoading(false)
setTours(tours)
}catch(error) {
setLoading(false)
console.log(error)
}
}




useEffect(()=>{
fetchTours()
},[])


useEffect(() => {
if (isTitle) {
changeTitle(newTitle)
}else{
isSetTitle(true)
}
}, [tours])




if(loading){
return (
<main>
<Loading />
</main>
)
}else{
return (


<main>
<Tours tours={tours} title={title} changeTitle={changeTitle}
removeTours={removeTours} />
</main>
)
}
}






export default App
小开

一个简单的方法是创建一个let，在你的组件，并设置为true。

然后说，如果它为真，将其设置为假，然后返回(停止)useEffect函数

像这样:


import { useEffect} from 'react';
//your let must be out of component to avoid re-evaluation
    

let isFirst = true
    

function App() {
useEffect(() => {
if(isFirst){
isFirst = false
return
}
    

//your code that don't want to execute at first time
},[])
return (
<div>
<p>its simple huh...</p>
</div>
);
}

它类似于@Carmine Tambasciabs溶液，但没有使用状态:) ‍‍‍‍‍‍ ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

小开

简化的实现

import { useRef, useEffect } from 'react';


function MyComp(props) {


const firstRender = useRef(true);


useEffect(() => {
if (firstRender.current) {
firstRender.current = false;
} else {
myProp = 'some val';
};


}, [props.myProp])




return (
<div>
...
</div>
)


}
小开 
function useEffectAfterMount(effect, deps) {
const isMounted = useRef(false);


useEffect(() => {
if (isMounted.current) return effect();
else isMounted.current = true;
}, deps);


// reset on unmount; in React 18, components can mount again
useEffect(() => {
isMounted.current = false;
});
}

我们需要返回从effect()返回的内容，因为它可能是一个清理函数。但我们不需要确定它是否是。只要把它传递下去，让useEffect来解决。

在这篇文章的早期版本中，我说过重置ref (isMounted.current = false)是不必要的。但在React 18中是这样的，因为组件可以以以前的状态重新挂载(感谢@Whatabrain)。

小开

我认为创建一个自定义钩子是多余的，我不想通过使用useLayoutEffect钩子来处理与布局无关的事情来混淆组件的可读性，所以，在我的例子中，我只是检查了触发useEffect回调的有状态变量selectedItem的值是否为它的原始值，以确定它是否是初始渲染:

export default function MyComponent(props) {
const [selectedItem, setSelectedItem] = useState(null);


useEffect(() => {
if(!selectedItem) return; // If selected item is its initial value (null), don't continue
        

//... This will not happen on initial render


}, [selectedItem]);


// ...


}
小开

你可以在挂载后使用定制的钩来运行use effect。

const useEffectAfterMount = (cb, dependencies) => {
const mounted = useRef(true);


useEffect(() => {
if (!mounted.current) {
return cb();
}
mounted.current = false;
}, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};

下面是typescript版本:

const useEffectAfterMount = (cb: EffectCallback, dependencies: DependencyList | undefined) => {
const mounted = useRef(true);


useEffect(() => {
if (!mounted.current) {
return cb();
}
mounted.current = false;
}, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};
小开 


const [dojob, setDojob] = useState(false);


yourfunction(){
setDojob(true);
}


useEffect(()=>{
if(dojob){
yourfunction();
setDojob(false);
}
},[dojob]);

提交答案