대응 - 파괴 시 defaultProps vs ES6 기본 매개 변수(성능 문제)

대응 - 파괴 시 defaultProps vs ES6 기본 매개 변수(성능 문제)

방금 상태 비저장 기능 구성 요소 중 하나에서 기본값을 설정할 때 반응 성능에 대한 질문을 받았습니다.

이 구성 요소는 포 넌 this a component는)defaultProps which defined 정의되어 있다row: false, , but I didn't like it because the 하지만 나는 그것을 좋아하지 않았다. 왜냐하면defaultProps파일 끝에 있기 때문에 보기 어렵습니다.따라서 기본 속성을 인식할 수 없습니다.그래서 직접 함수 선언으로 옮기고 ES6 기본값을 사용하여 파라미터를 할당했습니다.

const FormField = ({
  row = false,
  ...others,
}) => {
  // logic...
};

하지만 우리는 이것이 좋은 생각인지 아닌지에 대해 동료와 논쟁을 벌였습니다.이는 사소한 것처럼 보일 수 있지만 리액션이 기본값을 인식하지 못하기 때문에 성능에 큰 영향을 미칠 수 있기 때문입니다.

난 이 사건을 믿어요, 사소한 일이에요.왜냐하면 이것은 부울이며 객체/배열이 아니기 때문에 조정 중에는 다른 값으로 표시되지 않기 때문입니다.

---

이제 좀 더 고급화된 사용 사례를 살펴보겠습니다.

const FormField = ({
  input: { name, value, ...inputRest },
  label = capitalize(name),
  placeholder = label,
  row = false,
  meta: { touched, error, warning },
  ...others,
}) => {
  // logic...
};

Here, I base the value of 여기서, 나는 의 가치를 기반으로 한다.placeholder부에서label, , which itself is based on 그 자체가 기반이 되고 있습니다.input.name으로 ES6 · ES6 파이이이이이이 / 이이이이이이이이이이이이이이이이이이이이이이 이이이 / 이이이이이이이이이 . . . . . 。

하지만 좋은 생각일까요?만약 그렇지 않다면, 어떻게 해야 할까요?

Disconsum #reactiflux 채널에서 여러 분들과 이야기를 나눴고 실제로 제가 찾던 답변을 받았습니다.

React 컴포넌트에는 기본적으로 3가지 유스케이스가 있으며, 그 중 일부 컴포넌트에서는 패럴램 파괴가 성능에 영향을 미치기 때문에 후드 아래에서 무슨 일이 일어나고 있는지 이해하는 것이 중요합니다.

스테이트리스 기능 컴포넌트

const MyComponent = ({ name = 'John Doe', displayName = humanize(name), address = helper.getDefaultAddress() }) => {
  return (
    <div>{displayName}</div>
  );
};

상태 비저장 기능 컴포넌트입니다., 합니다.또한 이 상태가 기능하는 것은Class인스턴스는 단순한 함수입니다.

사이클이 때문에 사이클이 하지 않습니다.componentWillMount ★★★★★★★★★★★★★★★★★」shouldComponentUpdate ★★★★★★★★★★★★★★★★★」constructor그리고 라이프 사이클이 관리되지 않기 때문에 퍼포먼스에 전혀 영향을 주지 않습니다.이 코드는 완전히 유효합니다.의 「Default」를 .displayName기능 본체 내에서의 가치는 높지만 결국 성능에 영향을 주지 않습니다.

스테이트리스 비기능 컴포넌트

(이러지 마세요!)

class MyComponent extends React.Component {
    render() {
        const { name = 'John Doe', displayName = humanize(name), address = helper.getDefaultAddress() } = this.props;
        return (
            <div>{displayName}</div>
          );
    }
}

이치노 '하지 않다', '기능하지 않다', '기능하지 있습니다.class그리고 수업이기 때문에, 확장.React.Component라이프 사이클을 갖는다는 뜻입니다.당신은 가질 수 있다componentWillMount ★★★★★★★★★★★★★★★★★」shouldComponentUpdate ★★★★★★★★★★★★★★★★★」constructorcontract.discontracts.

또, 라이프 사이클이 있기 때문에, 이 컴포넌트를 쓰는 방법이 좋지 않습니다.하지만 왜 그랬을까?

말하면,는 「Resact」를 제공합니다.defaultProps속성: 기본 소품 값을 처리합니다.하지 않는 컴포넌트를 때는 . 왜냐하면 기능하지 않는 컴포넌트를 할 때는 모든 입니다. 왜냐하면 이 컴포넌트는 에 의존하는 모든 방법으로 호출되기 때문입니다.this.props.

코드 됩니다.name ★★★★★★★★★★★★★★★★★」displayName단, 기본값은 이 메서드에만 적용됩니다.React 라이프 사이클(예: React 라이프 사이클)의 디폴트값을 모든 메서드에 적용하는 경우.shouldComponentUpdate, 등)를 사용해 주세요.defaultProps★★★★★★ 。

의 코드는 인 「」에 대해 이 있는 입니다.name.

같은 동작을 얻기 위해 대신 쓰는 방법은 다음과 같습니다.

class MyComponent extends React.Component {
    render() {
        const { name, displayName = humanize(name), address } = this.props;
        return (
            <div>{displayName}</div>
          );
    }
}

MyComponent.defaultProps = {
    name: 'John Doe',
    address: helper.getDefaultAddress(),
};

이게 더 낫다. '''로 되어 때문에'''John Doe의의정면면면면면면 면 address, "Default "는 다루지 않았습니다.displayName 왜?

글쎄, 그 특별한 사용 사례를 피할 방법을 아직 찾지 못했어. 냐하 because는displayName 기준으로 삼아야 합니다.name AFAIK를 할 때 수 defaultProps가 볼 수 있는 은 '에서 하는 것이다render더 좋은 방법이 .더 좋은 방법이 있을지도 몰라

addressMy Component 속성을 기반으로 하는 것이 아니라 소품이 필요 없는 완전히 독립적인 것에 의존하기 때문입니다.

스테이트풀 비기능 컴포넌트

"상태 없는 비기능 부품"아직 라이프 사이클이 있기 때문에 동작은 똑같을 것입니다.가 더 state컴포넌트에서는 아무것도 변경되지 않습니다.

---

컴포넌트와 함께 파괴를 사용할 때 이해에 도움이 되었으면 합니다.IMHO가 훨씬 깨끗해지기 때문에 기능적인 것이 매우 마음에 듭니다.

사용하시는 게 것 같아요.defaultProps일관성을 위해 (+1(+1) (+1)

하지 않는 defaultProps은 언제나

---

편집 10-2019: defaultProps는 향후 React API에서 삭제될 예정입니다.RFC에 대해서는 https://stackoverflow.com/a/56443098/2391795 및 https://github.com/reactjs/rfcs/pull/107를 참조하십시오.

의 큰 1개defaultPropsPropTypes를 사용합니다.require-default-propseslint-synt-synt-synt의 법칙이 그것을 잘 설명해 준다.

님의 중 defaultProps: " " " " " " " " " " " " "defaultProps are are are are 、 the the are the the 。PropTypes가 발생하므로 는 「형식 체크」, 「형식 체크」에도 됩니다.defaultProps 기능 함수 는 "Default Function Parameter"는 "Default Function Parameter"와 기본 기능 파라미터는 다음과 같이 동작하지 않습니다.defaultProps, '사용할 수 없습니다'를 사용합니다.defaultProps여전히 선호됩니다.

고급 사용 사례를 보면 구성 요소에 불필요한 속성을 추가하고 있습니다. label ★★★★★★★★★★★★★★★★★」placeholder전달되는 다른 속성에 의존하며 내 생각에 구성 요소 자체의 매개 변수로 나열해서는 안 됩니다.

가 약약 if면면면면면면면면면면면면면면면면면면면면면을 사용하려고 한다면<FormField />어플리케이션에서 특정 컴포넌트에 어떤 의존관계가 있는지 확인해야 하는데 왜 다른 파라미터를 기반으로 파라미터를 작성하는지 약간 헷갈립니다.label ★★★★★★★★★★★★★★★★★」placeholder기능 본체에 전달하기 때문에 컴포넌트 의존성이 아니라 단순히 부작용인 것이 분명합니다.

퍼포먼스에 관한 한 어느 쪽이든 큰 차이는 없을 것 같습니다.상태 비저장 구성 요소에는 상태 저장 구성 요소와 같은 '백업 인스턴스'가 실제로 없습니다. 즉, 메모리 내에 구성 요소를 추적하는 개체가 없습니다.그냥 매개 변수를 전달하고 뷰를 되돌리는 순수한 기능이라고 생각합니다.

같은 맥락에서 보면..PropTypes를 추가하면 유형 확인에 도움이 됩니다.

const FormField = ({
  input: { name, value, ...inputRest },
  row = false,
  meta: { touched, error, warning },
  ...others,
}) => {
  const label = capitalize(name),
  const placeholder = label,

  return (
    // logic
  );
};

FormField.propTypes = {
  input: PropTypes.shape({
    name: PropTypes.string.isRequired,
    value: PropTypes.string,
  }).isRequired,
  meta: PropTypes.shape({
    touched: PropTypes.bool.isRequired,
    error: PropTypes.bool.isRequired,
    warning: PropTypes.bool.isRequired,
  }).isRequired,
  row: PropTypes.bool.isRequired,
};

언급URL : https://stackoverflow.com/questions/41488537/react-defaultprops-vs-es6-default-params-when-destructuring-performances-issu