React.memo 구문 문제 대신 useMemo 사용

React.memo 구문 문제 대신 useMemo 사용

리액트 훅 useMemo를 사용하는 데모를 해야 합니다.작업 코드는 다음과 같습니다.

const SpeakerCardDetail = React.memo(
  ({id,...

이와 같은 구문을 사용할 수 있다는 링크를 찾았는데 정확히 알 수 없습니다.

이게 내가 아는 전부야

const SpeakerDetail = React.useMemo(() => {
   ({ id,

하지만 확실히 그건 아니야.React.memo가 문제를 해결한다는 것은 알지만 useMemo를 행동으로 보여줘야 하기 때문에 다른 구문을 사용할 수 있기를 바랍니다.

React.memo ★★★★★★★★★★★★★★★★★」React.useMemo는 전혀 동일하지 않습니다(이름의 유사성에 의존하지 마십시오).인용구가 있습니다.React.memo 문서:

React.memo는 고차 컴포넌트입니다.

즉, 동일한 속성을 가진 동일한 출력을 렌더링하기 때문에 컴포넌트의 렌더링을 최적화할 수 있는 HOC입니다.

React.useMemo한편, 는 보다 범용적이며 메모화된 값을 반환합니다.

'무엇을' 하다' useMemo는, 어느 관계(어느쪽인가)가, 합니다.a ★★★★★★★★★★★★★★★★★」b을 사용하다

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b), 
  [a, b]
);

해킹을 '해킹'이 아닌 '을할 수 .React.memo그것은 목적이 아니라 오히려 혼란을 가중시킬 것이다. useMemo는 후크이며 특정 사용규칙의 적용을 받습니다.

그리고 이 경고도 있습니다.

향후 React는 이전에 메모된 값을 "잊어버리고" 다음 렌더링 시 재계산하도록 선택할 수 있습니다(예: 오프스크린 컴포넌트용 메모리 확보)..코드가 할 수 있도록 하겠습니다.useMemo퍼포먼스를 최적화하기 위해 추가합니다.

한편, 「 」는, 「 」, 「 」의 사이에memo 및 HOC입니다.useMemo후크이므로 같은 결과를 얻을 수 있습니다.

문맥상 HOC는 클래스 기반 컴포넌트와 기능 컴포넌트 모두에서 오랫동안 사용되어 온 오래된 React 패턴입니다.현재도 사용할 수 있습니다(권장 폐지 계획은 없습니다).

후크는 기능 컴포넌트를 강화한 비교적 새로운 개념(약 1년)으로 많은 경우 코드를 대폭 간소화합니다.그래서 많은 개발자들이 후크를 사용하는 쪽으로 이동하고 있다.

둘 다memo ★★★★★★★★★★★★★★★★★」useMemo기능과 소품이라는 두 가지 주장을 받아들인다.후속 리렌더에서 소품이 변경되지 않으면 함수는 다시 실행되지 않고 이전 결과를 반환합니다.이는 사실상 다음 사항을 대체한다.shouldComponentUpdate콜백(완전히 기능적인 접근법)을 사용합니다.

★★★★★★★★★★★★★★★★ memo을 사용하다

const SpeakerCardDetail = React.memo(
  (props) => <div>{props.name}</div>
)

★★★★★★★★★★★★★★★★ useMemo이치노

const SpeakerCardDetail = (props) => useMemo(() => <div>{props.name}</div>)

「 」라는 점에 해 주세요.useMemo기능 되고, 는 컴포넌트 기능 안에서 사용됩니다.memo을 사용하다

좀 더 전통적으로useMemo이치노

function SpeakerCardDetail(props) {
  return useMemo(
    () => <div>{props.name}</div>
  )
}

위의 매번 "가 됩니다.useMemo조금 쓸모가 없다.을사용하다memo.)

두 번째 인수의 형식에는 약간의 차이가 있다. memo ' 소품과 소품을 을하면서 '예전 소품과 현재의 소품을 비교하는 기능을 하고 있습니다.shouldComponentUpdate이치노

const SpeakerCardDetail = React.memo(
  (props) => <div>{props.name}</div>
,
  // return true if passing nextProps to render would return the same result as passing prevProps to render, otherwise return false
  (prevProps, nextProps) => prevProps.name === nextProps.name
)

useMemo한편, 에서는 배열을 두 번째 인수로 상정하고 있습니다.배열 값이 변경될 때마다 함수가 다시 실행됩니다.

function SpeakerCardDetail(props) {
  return useMemo(
    () => <div>{props.name}</div>
  ,
    [props.name]
  )
}

그것보다 더 마법은 없어. 다.memo ★★★★★★★★★★★★★★★★★」useMemo되며, 유일한 은 "함수 결과"입니다. 유일한 차이점은memo는 HOC와 기능 컴포넌트 모두를 사용 가능)이며, HOC(클래스 컴포넌트 및 컴포넌트는 HOC(클래스 컴포넌트와 기능 컴포넌트를 랩하기 위해 사용 가능)입니다.useMemo는 후크입니다(기능 컴포넌트 내부에서만 사용할 수 있습니다).

React.memo »useMemo / TLDR:

React.memo 는 소품을 기반으로 반응 컴포넌트를 메모하는 고차 컴포넌트(HOC)입니다.

export function SomeComponent({ num }) {
  return <p>{num * 10}</p>
}

export default React.memo(SomeComponent, function areEqual(
  prevProps,
  nextProps
) {
  if (prevProps.num !== nextProps.num) {
    return false
  }
  return true
})

useMemo 는 지정한 함수에서 반환되는 값을 메모하는 리액트훅입니다.

export function SomeComponent({ num }) {
  const res = useMemo(() => num * 10, [num])
  return <p>{res}</p>
}

원천

리액트.메모

「」를 사용합니다.React.memo소품이 변경되지 않은 경우 React는 컴포넌트 렌더링을 건너뜁니다.

예:

const Child = React.memo(props => {
  console.log("rendered");
  return <React.Fragment>{props.name}</React.Fragment>;
});

class App extends React.Component {
  state = {
    value: 1,
    name: "Jioke"
  };

  handleClick = () => {
    this.setState({
      value: this.state.value + 1
    });
  };

  render() {
    return (
      <React.Fragment>
        <Child name={this.state.name} />
        <div>{this.state.value}</div>
        <button onClick={this.handleClick}>+</button>
      </React.Fragment>
    );
  }
}

하면, 「 」가 표시됩니다.Child('렌더rendered는 1어느 정도밖에 표시되지 않습니다.

주의: 더 많은 소품, 더 많은 계산, 비교(렌더 여부) 추가 비교 비용은 렌더링, 조정, DOM 변경 및 부작용 비용 측면에서 "심플" 컴포넌트에는 가치가 없습니다.사용 여부를 신중하게 판단해 주세요.

메모 사용

useMemo는 컴포넌트가 재검출될 때마다 값을 재계산할 필요가 없도록 값을 캐시합니다.함수의 반환 값을 저장하고 입력이 변경되지 않은 경우 반환합니다.

예:

import { useState, useMemo } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

ReactDOM.render(<App />, document.getElementById('root'));

모든 렌더링에서 실행되는 고가의 기능이 있습니다.카운트를 변경하거나 작업을 추가할 때 실행이 지연됩니다. '이렇게'를 useMemo고가의 함수는 종속성이 변경되었을 때만 실행됩니다.다음 예제에서는 비싼 함수는 카운트가 변경되었을 때만 실행되며 작업관리가 추가되었을 때는 실행되지 않습니다.

아래를 사용해 주세요.simple위의 답변을 더 잘 이해하기 위한 예시를 참조하십시오.에서는, 를 가장 간단하게.

• memo
  • 소품이 변경되지 않으면 컴포넌트가 다시 렌더링되지 않습니다.
• useMemo
  • 종속성이 변경되지 않으면 구성 요소가 다시 렌더링되지 않습니다.
  • 종속성이 변경되지 않으면 (고가의 기능에 유용한) 기능은 다시 실행되지 않습니다.

// index.js

import React , { useState, useMemo } from 'react';
import ReactDOM from 'react-dom/client';

const Child1 = (props) => {
  console.log("Child1");
  return <p>Child 1</p>;
};

const Child2 = React.memo((props) => {
  console.log("Child2");
  return <p>Child 2</p>;
});

const Child3 = (props) => {
  console.log("Child3");
  return <p>Child 3</p>;
};

const expensiveCalculation = (label) => {
  console.log(label);
  return label;
}; 

function App() {
  console.log("App");

  const [count, setCount] = useState(0);
  const child3 = useMemo(() => <Child3 />, []);

  const calculation1 = expensiveCalculation("Expensive calculation without useMemo");
  const calculation2 = useMemo(() => expensiveCalculation("Expensive calculation with useMemo"), []);

  return (
    <>
      <button onClick={() => {setCount(c => c + 1);}}>Increase count</button>
      <p>Current count: {count}</p>

      <Child1 />
      <Child2 />
      {child3}

      <p>{calculation1}</p>
      <p>{calculation2}</p>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

입력/출력:

// Initial render
App
Expensive calculation without useMemo
Expensive calculation with useMemo
Child1
Child2
Child3
// Click on the "Increase count" button and observe the impact of memo and useMemo.
App
Expensive calculation without useMemo
Child1

주의:

• 나는 설명하기 쉽게 하기 위해 아주 간단한 예를 들었다.메모와 useMemo가 취하는 주장에 대해 조금 더 조사해 주세요.

언급URL : https://stackoverflow.com/questions/55466104/using-usememo-instead-of-react-memo-syntax-issue