useEffect에서 종속 어레이를 제공하지 않는 것과 빈 어레이의 차이점은 무엇입니까?

useEffect에서 종속 어레이를 제공하지 않는 것과 빈 어레이의 차이점은 무엇입니까?

내 생각에...useEffect후크는 빈 종속 배열과 함께 제공된 경우 모든 렌더링 후에 실행됩니다.

useEffect(() => {
  performSideEffect();
}, []);

하지만 이것과 다음 것의 차이점은 무엇일까요?

useEffect(() => {
  performSideEffect();
});

이 부족한 것에 주의해 주세요.[]마지막에.linter 플러그인이 경고를 발생시키지 않습니다.

전혀 같지 않아요.

• 빈 어레이를 지정하면 다음과 같이 동작합니다.componentDidMount한 번밖에 안 돼요.

• 두 번째 인수를 제시하지 않는 것은 양쪽 모두의 역할을 한다.componentDidMount그리고.componentDidUpdate에서와 같이 먼저 마운트에서 실행한 후 다시 실행할 때마다 실행됩니다.

• 값이 포함된 배열을 두 번째 인수로 지정(예:, [variable1]내부 코드만 실행됩니다.useEffect특정 변수(variable1)가 변경될 때마다 ONCE를 마운트 상에 후크합니다.

두 번째 인수에 대한 자세한 내용과 후크가 공식 문서에서 실제로 어떻게 기능하는지에 대한 자세한 내용은http://https://reactjs.org/docs/hooks-effect.html 를 참조해 주세요.

의 추가 사항만@bamtheboozle's정답.

에서 정리 기능을 반환하는 경우useEffect

useEffect(() => {
  performSideEffect();
  return cleanUpFunction;
}, []);

그것은 모든 것 보다 먼저 달릴 것이다.useEffect코드 실행 - 이전 useEffect 실행을 정리합니다(첫 번째 useEffect 실행 제외).

차이점은 빈 배열 종속성을 제공하지 않으면 useEffect() 후크가 마운트 및 업데이트 모두에서 실행된다는 것입니다.

파티에는 늦었지만, 위의 코멘트를 읽은 후 제 이해를 위해 이 예를 여기에 넣으려고 생각했습니다.

import './App.css';
import { useEffect, useState } from 'react';

function App() {

  const [name, setName] = useState('John');
   useEffect(()=>{
    console.log("1- No dependency array at all");
  });
  useEffect(()=>{
    console.log("2- Empty dependency array");
  }, []);
  useEffect(()=>{
    console.log("3- Dependency array with state");
  }, [name]);

  const clickHandler = () => {
    setName('Jane');
  }
  return (
    <div className="App">
      <button onClick={clickHandler}>Click to update state</button>
      <p>{`Name: ${name}`}</p>
    </div>
  );
}

export default App;

산출량

페이지 로드 중

 1- No dependency array at all
 2- Empty dependency array
 3- Dependency array with state
 1- No dependency array at all
 2- Empty dependency array
 3- Dependency array with state

On 버튼 -state update를 클릭합니다.

 1- No dependency array at all
 3- Dependency array with state

언급URL : https://stackoverflow.com/questions/58579426/in-useeffect-whats-the-difference-between-providing-no-dependency-array-and-an