根据文件:
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>
@MehdiDehghani,你的解决方案工作得非常好,你必须做的一件事是卸载,重置didMount。当前值为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;
如果你想跳过第一次渲染,你可以创建一个状态“firstRenderDone”,并在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]);
与Tholle的答案相同,但使用useState而不是useRef。
const [skipCount, setSkipCount] = useState(true);
...
useEffect(() => {
if (skipCount) setSkipCount(false);
if (!skipCount) runYourFunction();
}, [dependencies])
EDIT
虽然这也可以工作,但它涉及到更新状态,这会导致组件重新呈现。如果你的组件的所有useEffect调用(以及它的所有子组件)都有一个依赖数组,这没有关系。但是请记住,任何没有依赖数组的useEffect(useEffect(() =>{…})将再次运行。
使用和更新useRef不会导致任何重渲染。
前面所有的都很好,但是这可以通过一种更简单的方式实现,考虑到useEffect中的操作可以被“跳过”,放置一个基本上不是第一次运行的if条件(或任何其他条件),并且仍然具有依赖。
例如,我有一个案例:
从API加载数据但我的标题必须是“Loading”直到日期不存在,所以我有一个数组,开始时为空,并显示文本“显示”
使用来自这些API的不同信息来呈现组件。
用户可以一个一个删除这些信息,甚至所有使tour数组再次为空,作为开始,但这一次API获取已经完成
一旦旅游列表是空的删除,然后显示另一个标题。
所以我的“解决方案”是创建另一个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
这是迄今为止我使用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"
}]
}
}