React 순수 그룹 React의 순수 그룹

본고에서, 우리는 React JS의 순수한 구성 요소, 순수한 함수, 그리고 React 구성 요소를 어떻게 순수한 구성 요소로 변환하는지 토론할 것이다.

무엇이 순함수입니까?

Javascript에서 같은 입력을 전달할 때 함수가 같은 출력을 되돌려주는 것을 순수함수라고 합니다.이것은 같은 입력을 위해 같은 데이터를 되돌려 주는 것과 같다.따라서 순수 함수에서 출력은 입력 매개 변수에 달려 있다.순함수도 부작용이 생기지 않는다.과거에, 당신들은 이미 이렇게 많은 순함수를 만들었을 것이다.
예:

function Add(num1, num2){
  return num1 + num2;
}

만약 우리가 상술한 Add(2,2) 함수를 호출한다면, 그것은 시종 4를 출력으로 되돌려 줄 것이다.따라서 같은 입력 파라미터를 사용하여 상기 함수를 여러 번 호출하면 항상 4개의 출력을 되돌려줍니다.이런 순함수는 함수의 성능을 최적화하고 향상시킬 수 있기 때문이다.

React의 순수 함수

우리는 React에서 두 가지 다른 방식으로 구성 요소를 만들 수 있다는 것을 알고 있다. 하나는 클래스 구성 요소/상태 구성 요소이고, 다른 하나는 기능 구성 요소/상태 없는 구성 요소이다.React 구성 요소가 같은 상태이고 도구가 같은 출력을 보이면 순수하게 볼 수 있습니다.
다음과 같이 어셈블리를 일반 어셈블리로 변환할 수 있습니다.

클래스 구성 요소에 대해react는 React.PureComponent 기본 클래스를 제공합니다.

기능 구성 요소에 대해react는 HOC(고급 구성 요소)를 제공합니다.

반응하다메모

클래스 구성 요소가 기본 클래스를 확장할 때 React는 이 구성 요소를 순수한 구성 요소로 간주합니다.React.PureComponent류와 React.PureComponent 간의 주요 차이점은 React.Component의 실현이다.React.PureComponent에서 shouldComponentUpdate () 는 시종일관true로 되돌아옵니다. 한편, shouldComponentUpdate() 에서는 현재 상태와 도구를 새로운 상태와 도구와 비교합니다.
AsReact.Component는 순수한 구성 요소를 위해 React.PureComponent 방법을 실현했다. 이 방법은 성능을 향상시키고 렌더링을 최적화할 것이다.그러나 이곳의 중점은 얕은 비교만 했기 때문에 만약 당신이 매우 복잡한 끼워 넣는 대상이 있다면 그것은 당신에게 잘못된 결과를 줄 수 있다는 것이다.
따라서 다음과 같은 간단한 클래스 구성 요소를 만듭니다.

import React, { Component } from "react";

class PureClassComponent extends Component {
  constructor() {
    super();
    this.state = {
      name: "React JS"
    };
  }

  changeName = () => {
    this.setState({ name: "React JS" });
  };

  render() {
    console.log("FirstComponent -- Render method called");
    return (
      <div>
        <p> Name is : {this.state.name} </p>
        <button onClick={this.changeName}>Change Name</button>
      </div>
    );
  }
}

export default PureClassComponent;

위의 구성 요소에서, 단추를 눌렀을 때, 상태에서name에 같은 값을 설정합니다.그러나 흥미로운 것은 우리가 같은 값을 설정해도 항상 구성 요소를 다시 렌더링한다는 것이다.

다음은 그림의 순수한 구성 요소입니다.순수한 구성 요소는 React.PureComponent 방법을 호출할 때 현재 상태와 새로운 상태, 그리고 현재 도구와 새로운 도구를 비교합니다.따라서 shouldComponentUpdate() 방법에 대한 불필요한 호출을 줄이는 데 도움이 될 것이다.
이제 React 라이브러리에서 PureComponent 클래스를 가져오고 PureComponent 클래스를 사용하여 현재 구성 요소를 확장하고 컨트롤러에서 출력을 보기만 하면 됩니다.
setState() 단추를 눌렀을 때, 우리는 상태에 같은 값을 분배하지만, 한 번 또 한 번render 방법을 호출하지 않습니다.

render（）

Change Name는 고급 함수(HOC)에 불과합니다.React.memo와 유사하며 클래스 구성 요소가 아닌 기능 구성 요소에 사용됩니다.구성 요소가 전달된 같은 도구를 사용하여 같은 출력을 보일 때 기능 구성 요소를 포장할 수 있습니다.따라서 성능이 향상되고 렌더링이 최적화됩니다.React.memo 구성 요소 도구가 변경된 경우에만 유효합니다.이것은 React.memo 갈고리 함수를 사용하여 상태를 사용하면 모든 상태 변경에 대해 구성 요소를 렌더링한다는 것을 의미한다.React.PureComponent와 유사하게 도구를 간단하게 비교했다.React.memo 첫 번째 매개 변수를 구성 요소로 하고 특수한 React 구성 요소를 되돌려줍니다.
프레젠테이션 목적으로 다음과 같은 간단한 계수기 프로그램을 만들었습니다.
사용자 정의 레이블.회사 명

import React from "react";

export default ({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
};

반부품.회사 명

import React, { useState } from "react";
import CustomLabel from "./CustomLabel";

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <CustomLabel name="Simple Counter app" />
      <p>Counter is : {counter} </p>
      <button onClick={() => setCounter(counter + 1)}>Click</button>
    </div>
  );
};
export default CounterComponent;

여기서 CounterComponent와 CustomLabel 구성 요소 두 개를 만들었습니다.CustomLabel 구성 요소는 이름을 도구로 사용하고 태그 레이블에 표시합니다.CustomLabel 구성 요소에 콘솔을 추가했습니다.구성 요소가 렌더링되는 횟수를 볼 수 있도록 log ()버튼을 클릭하여 계수를 늘릴 때마다 CustomLabel 구성 요소가 다시 렌더링됩니다.
지금 반응해.메모가 그림에 나타납니다.따라서 CustomLabel 구성 요소를 React에 패키지화합니다.응용 프로그램을 다시 테스트합니다.버튼을 클릭할 때마다 이름 속성이 변하지 않기 때문에 CustomLabel 구성 요소만 렌더링하는 것을 볼 수 있습니다.
사용자 정의 레이블.회사 명

import React, {memo} from "react";

const CustomLabel=({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
};
export default memo(CustomLabel);

결론

본고에서 저는 React JS의 순수한 구성 요소를 설명하고 클래스와 기능 구성 요소를 어떻게 순수한 구성 요소로 변환하는지 토론했습니다.
나는 정말 네가 이 글을 좋아해서 친구에게 나누기를 바란다. 망설이지 말고 너의 생각이나 의견을 나에게 주어라.
너는 트위터에서 나를 팔로우할 수 있다
즐거운 인코딩!