ESLint - 구성 요소를 순수한 기능으로 작성해야 합니다(반응 선호/상태 없음 기능).

ESLint - 구성 요소를 순수한 기능으로 작성해야 합니다(반응 선호/상태 없음 기능).

ESLint에서 리액트 프로젝트에서 이 오류가 발생하였습니다.

구성 요소는 순수한 함수로 작성해야 합니다(반응 선호/상태 없음 함수).

컴포넌트의 첫 번째 행을 가리킵니다.

export class myComponent extends React.Component {
render() {
    return (

      //stuff here

    );
  }
}

이 오류를 제거하려면 어떻게 해야 합니까?

두 가지 선택지

경고를 일시적으로 비활성화하다

^{(테스트되지 않았습니다.또한 여러 가지 방법이 있습니다).}

// eslint-disable-next-line react/prefer-stateless-function
export class myComponent extends React.Component {
  ...
}

순수 상태 비저장 구성 요소 사용

를 들어 컴포넌트의 컴포넌트를 있습니다).render★★★★

export const myComponent = () => {
  return (
    // JSX here
  )
}

(또는 ES6 이외의 표기법을 사용합니다).

다른 뒷받침 논리가 없는 이와 같은 컴포넌트의 경우 암묵적인 리턴을 선호합니다.

export MyComponent = () =>
  <div>
    // Stuff here
  </div>

이것은 선호도의 문제이다.단, 리액트 명명 규칙을 따르고 모든 컴포넌트는 대문자로 시작해야 합니다.

^{ESLint는 여러 줄의 JSX 식 주위에 패런이 없는 것을 호소할 수 있으므로 해당 규칙을 디세블로 하거나 패런을 사용합니다.}

소품이 필요한 경우 기능 인수로서 전달됩니다.

const MyComponent = (props) =>
  <div>
    <Something someProp={props.foo} />
  </div>

export MyComponent

또한 편의를 위해 평소처럼 매개 변수를 파괴할 수 있습니다.

const MyComponent = ({ foo }) =>
  <div>
    <Something someProp={foo} />
  </div>

그러면 로컬 변수를 사용하는 경우 암묵적인 반환이 조금 더 쉬워질 수 있습니다.ESLint가 PropTypes한 가 아니기 때문에 할 수 .static propTypes수업에서, 그들은 (많은 사람들이 어쨌든 선호하고 있는) 기능에 첨부되어야 한다.

constructor()들면 다음과 같습니다.

exports class myComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>Hello</div>
    );
  }
}

구성 요소를 상태 비저장 함수로 씁니다.

export myComponent = () => { //stuff here };

React에는 실제로 두 가지 유형의 구성 요소가 정의됩니다.기능 컴포넌트(소품에서 리액트 컴포넌트까지의 기능일 뿐) 및 클래스 컴포넌트.

컴포넌트의 주요 가 '클래스 컴포넌트'를 가질 수 입니다.state 라이프 ( 「」등)을 합니다.componentDidMount,componentDidUpdate 등등.

일반적으로 스테이트리스 컴포넌트는 이해하기 쉽기 때문에 라이프 사이클 상태의 방법이 필요하지 않을 때는 스테이트리스 함수로 컴포넌트를 기입해야 합니다.

함수 구성요소를 작성하려면 단일 인수를 사용하는 함수를 작성합니다.이 인수는 컴포넌트의 지지를 받습니다. 때문에 그, 용, 사, 사, 사, 사, 사, 량, 량, consequ, consequ, consequ, consequ, consequ을 사용하지 않습니다.this.props컴포넌트의 소품에 액세스하려면 함수의 인수를 사용합니다.

의지하고 있는 경우props따라서 스테이트리스 함수를 쓰지 않고 PureComponent를 작성하고 다음 eslint 규칙[소스]을 사용하여 이 오류를 해결할 수 있는 더 나은 방법이 있습니다.

"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],

위의 규칙에서는 다음 스니펫이 유효합니다(이는 다음 규칙에 따라 다름).props)

class Foo extends React.PureComponent {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

리액트 팀은 SFC를 중심으로 최적화를 구축할 계획이지만 아직 실현되지 않았다.그때까지SFCs에 대해 어떠한 이점도 제공하지 않습니다.PureComponents오히려 낭비를 막지는 못하기 때문에 조금 더 나빠질 것이다.

클래스에 수명 주기 메서드 또는 생성자가 없는 경우에만 이 오류가 발생합니다.이 문제를 해결하려면 보풀 속성을 비활성화하거나 순수 함수로 만들거나 클래스용 컨스트럭터를 만들어야 합니다.

const myComponent = () => {
return (
  //stuff here

  );
};

export default myComponent;

app.js 파일에서는 이 컴포넌트를 Import하기만 하면 됩니다.

import myComponent from './myComponent.js'

라고 부르다

<myComponent />

확실히 효과가 있을 거예요.

export class myComponent extends PureComponent {
  ...
}

jsx 템플릿을 렌더링하고 상태를 선언하지 않는 경우constructor(props)소품의 순수한 기능으로 컴포넌트를 써야 합니다.class키워드를 지정합니다.

예를 들어,

export const myComponent = () => (
   // jsx goes here  
);

생성자(생략자)를 추가해야 합니다.

export class myComponent extends React.Component {
    constructor(props) {
            super(props);
            this.state = {};
        }
    render() {
        return (
    
          //stuff here
    
        );
      }
    }

언급URL : https://stackoverflow.com/questions/43378911/eslint-component-should-be-written-as-a-pure-function-react-prefer-stateless