>

나는 몇 년 동안 React와 함께 연주했지만 어떤 경우에는 마운트/마운트 해제 메커니즘과 혼동되었습니다.

마운트/마운트 해제는 부작용을 수행 할 수있는 곳이기 때문에 무작위로 호출되는 것을 원하지 않습니다. 그래서 그들이 어떻게 작동하는지 알아 내야합니다. 내가 현재 이해할 수있는 한, 가상 돔이 실제 돔에 존재하지 않으면 마운트 해제되는 경향이 있습니다. 그러나 전체 이야기가 아닌 것 같습니다.

function TestMount(props) {
  useEffect(() => {
    console.log("componentDidMount", props.name);
    return () => {
      console.log("componentWillUnount", props.name);
    };
  }, []);
  return <h1>Test content {" " + JSON.stringify(props.name)}</h1>;
}
function Update({ click }) {
  return <button onClick={click}>Update</button>;
}
function App() {
  const [count, setCount] = useState(0);
  const Component = name => <TestMount name={name} />;
  return (
    <div className="App">
      <h1>{count}</h1>
      <Component name="one" />
      {Component("two")}
      <Update click={() => setCount(x => x + 1)} />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

컴포넌트 1은 앱이 렌더링하는 동안 오버 타임으로 다시 마운트되지만 컴포넌트 2는 그렇지 않은 이유는 무엇입니까?

  • 답변 # 1

    Component   App 때마다 새로운 기능입니다  렌더링되므로 <Component name="one" />  매번 다시 마운트되므로 다른 구성 요소로 간주됩니다.

    Component("two") 의 결과  전화는 <TestMount name={"two"} /> 입니다 TestMount   App 때마다 동일하게 유지  렌더링되어 다시 마운트되지 않습니다.

    Component   name 를 전달하는 데 사용 된 구성 요소의 유효하지 않은 구성 요소입니다.   name 로 문자열   TestMount 에 소품   name 때문에 구성 요소   Component 때 매개 변수는 문자열이 아니라 props 객체입니다.   <Component name="one" /> 처럼 사용됩니다 . 와이즈 비즈  렌더링 함수이므로 name => <TestMount name={name} /> 와 같이 적절하게 이름을 지정하는 것이 좋습니다.  구성 요소가 renderTestMount 처럼 직접 호출되지 않기 때문에 명확성을 위해 .

    함수를 컴포넌트로 사용하거나 함수를 렌더 할 수있는 경우 서명을 Component("two") 로 변경해야합니다. .

    ({ name }) => <TestMount name={name} /> 에 대해 예상되는 동작을 달성 할 수 있습니다.   <Component name="one" /> 를 기억함으로써 :

    Component
    
    

    그러나 pyzwyz 이후   const Component = useCallback(({ name }) => <TestMount name={name} />, []); 에 의존하지 않습니다  범위, 올바른 방법은 외부에서 정의하는 것입니다.

    Component
    
    

    예를 들어, 이것이 React Router App 의 이유입니다  별도의 const Component = ({ name }) => <TestMount name={name} />; function App() {...} 가 있습니다  그리고 Route  컴포넌트와 렌더링 기능을위한 props. 이를 통해 현재 범위에서 동적으로 정의해야하는 경로 구성 요소의 불필요한 재 마운트를 방지 할 수 있습니다.

  • 답변 # 2

    이 문제의 핵심은 React Component와 React 요소의 차이입니다.   component 와 똑똑하다   render 가 아님 컴포넌트 대 요소

    Component는 React 를 사용하여 요소를 만드는 데 사용되는 템플릿입니다.  조작. 내 장래에 element   Component 와 거의 같습니다  OOP 세계에서 연산자.

    React가 렌더링간에 업데이트를 수행하는 방법

    언제나 <>  메소드 (또는 기능 컴포넌트)가 호출됩니다. 새 요소는 <> 를 사용하여 작성됩니다. 그러나 new  렌더 사이에 생성 된 요소가 실제로 동일하다는 것을 알기에 충분히 영리합니다. 즉, 이전에 생성되었고 동일한 구성 요소로 요소가 생성되는 한재사용 할 수 있습니다

    다른 구성 요소는 어떻습니까 그러나 요소 변경을 생성하기 위해 사용하는 구성 요소의 아이덴티티 (구성 요소가 동일하게 보이는 경우에도)가 React는 새로운 요소가 있다고 생각하므로 이전 요소를 제거 (마운트 해제)하고 새 요소를 추가 (마운트)합니다. 따라서 render  또는 <>  호출됩니다.

    어떻게 혼란스러워

    우리는 React 를 가지고 있다고 생각  우리가 componentDidMount 를 생성 할 때   componentWillUnmount 사용  react는 동일한 Component 에 의해 생성되므로 동일한 요소를 말할 수 있습니다. 그러나 element 매번 <Component />  다른 Component 를 사용하여 생성되었습니다. . 실제로 동적으로 구성된 HOC입니다. HOC는 렌더 기능 내에서 동적으로 생성되므로 언뜻보기에 혼란 스러울 수 있습니다.

    그렇습니다

    위의 아이디어에 대한 공식 문서를 찾지 못했습니다. 그러나 아래 코드로 충분합니다.

    HOCComponent=()=><Component />; element= <HOCComponent />
    
    

    편집

    또한 위의 코드는 원하지 않는 마운트/마운트 해제를 피하는 세 가지 방법을 제공합니다. 모든 솔루션은 어떻게 든 HOC의 정체성을 캐시합니다

    element

  • 이전 ruby on rails - schemarb의 큰 따옴표로 묶인 문자열
  • 다음 java - ProGuard가 여전히 Facebook 코드를 제거합니까? (또는 ProGuard를 비활성화하십시오!)