react를 사용한 7개의 피갱 사례 소결

React는 인기 있는 프런트엔드 프레임워크입니다.오늘 우리는 React 개발자가 주의해야 할 일곱 가지 점을 탐색해 보았다.

1. 구성 요소가 비대함

React 개발자는 필요한 충분한 구성 요소화를 만들지 못했습니다. 사실 이 문제는 React 개발자에만 국한되지 않고 많은 Vue 개발자들도 그렇습니다.
물론, 우리가 지금 토론하고 있는 것은 React이다
React에서, 우리는 여러 가지 작업을 수행하기 위해 많은 내용의 구성 요소를 만들 수 있지만, 가장 좋은 것은 구성 요소가 하나의 함수와 연결되도록 하는 것이다.이렇게 하면 너의 시간을 절약할 뿐만 아니라, 너를 도와 문제를 잘 포지셔닝할 수 있다.
예를 들어 다음 TodoList 구성 요소:

// ./components/TodoList.js

import React from 'react';

import { useTodoList } from '../hooks/useTodoList';
import { useQuery } from '../hooks/useQuery';
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';

const TodoList = () => {
  const { getQuery, setQuery } = useQuery();
  const todos = useTodoList();
  return (
    <div>
      <ul>
        {todos.map(({ id, title, completed }) => (
          <TodoItem key={id} id={id} title={title} completed={completed} />
        ))}
        <NewTodo />
      </ul>
      <div>
        Highlight Query for incomplete items:
        <input value={getQuery()} onChange={e => setQuery(e.target.value)} />
      </div>
    </div>
  );
};

export default TodoList;

2. state 직접 변경

React에서 상태는 변하지 않을 것입니다.state를 직접 수정하면 수정하기 어려운 성능 문제를 초래할 수 있습니다.
예:

const modifyPetsList = (element, id) => {
  petsList[id].checked = element.target.checked;
  setPetsList(petList)
}

위의 예에서 그룹 대상의 checked 키를 변경하고 싶습니다.그러나 같은 인용으로 대상을 변경했기 때문에React는 관찰하고 다시 렌더링을 촉발할 수 없습니다.
이 문제를 해결하려면 setState () 방법이나useState () 갈고리를 사용해야 합니다.
useState () 방법을 사용하여 이전의 예를 다시 씁니다.

const modifyPetsList = (element, id) => {
  const { checked } = element.target;
  setpetsList((pets) => {
    return pets.map((pet, index) => {
      if (id === index) {
        pet = { ...pet, checked };
      }
      return pet;
    });
  });
};

3.props 이 전송 숫자 형식의 값은 문자열을 전송하고 반대로도 문자열을 전송한다

이것은 아주 작은 잘못이므로 나타나서는 안 된다.
예:

class Arrival extends React.Component {
  render() {
    return (
      <h1>
        Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .
      </h1>
    );
  }
}

여기 = = = 문자열'1'은 유효하지 않습니다.이 문제를 해결하려면props 값을 전달할 때 {}로 싸야 합니다.
수정은 다음과 같습니다.

// ❌
const element = <Arrival position='1' />;

// ✅
const element = <Arrival position={1} />;

4. list 구성 요소에서 키를 사용하지 않았습니다.

다음 목록 항목을 렌더링해야 하는 경우:

const lists = ['cat', 'dog', 'fish'];

render() {
  return (
    <ul>
      {lists.map(listNo =>
        <li>{listNo}</li>)}
    </ul>
  );
}

물론 위의 코드는 실행할 수 있다.목록이 복잡하고 변경 등의 작업이 필요할 때 렌더링 문제가 발생합니다.
React는 문서 객체 모델(DOM)의 모든 목록 요소를 추적합니다.목록이 변경되었는지 알려줄 기록이 없습니다.
이 문제를 해결하려면 목록 요소에 키를 추가해야 합니다.keys는 모든 요소에 유일한 표지를 부여합니다. 이것은 React가 추가되었는지, 삭제되었는지, 어떤 항목을 수정했는지 확인하는 데 도움이 됩니다.
다음과 같습니다.

<ul>
  {lists.map(listNo =>
    <li key={listNo}>{listNo}</li>)}
</ul>

5. setState는 비동기식 작업

React에서state가 비동기적으로 작동하는 것을 쉽게 잊을 수 있습니다.만약 당신이 값을 설정한 후에 그것을 방문한다면, 즉시 이 값을 얻을 수 없을 수도 있습니다.
다음 예를 살펴보겠습니다.

handlePetsUpdate = (petCount) => {
  this.setState({ petCount });
  this.props.callback(this.state.petCount); // Old value
};

setState () 의 두 번째 인자, 리셋 함수를 사용하여 처리할 수 있습니다.예:

handlePetsUpdate = (petCount) => {
  this.setState({ petCount }, () => {
    this.props.callback(this.state.petCount); // Updated value
  });
};

6. Redux 사용 빈도

대형 React 앱에서 많은 개발자들이 Redux를 사용하여 전역 상태를 관리합니다.
Redux는 유용하지만 모든 상태를 관리하는 데 사용할 필요는 없습니다.
만약 우리 프로그램이 정보를 교환할 병렬 구성 요소가 없을 때, 프로젝트에 추가 라이브러리를 추가할 필요가 없습니다.예를 들어 구성 요소의 폼 단추 상태를 바꾸고 싶을 때, 우리는state 방법이나useState 갈고리를 우선적으로 고려합니다.

7. 구성 요소는 대문자로 시작하지 않았습니다.

JSX에서 소문자로 시작하는 구성 요소는 아래로 HTML 요소로 컴파일됩니다.
그래서 우리는 아래의 작법을 피해야 한다.

class demoComponentName extends React.Component {
}

이것은 오류를 초래할 수 있습니다. React 구성 요소를 렌더링하려면 대문자로 시작해야 합니다.
그러면 다음과 같은 방법을 취해야 한다.

class DemoComponentName extends React.Component {
}

뒷말

위의 내용은 Top 10 mistakes to avoid when using React에서 추출하고 의역 방식을 채택하여 7개의 비교적 실용적인 내용을 추출했다.
이 글은react를 사용한 7개의 피갱 사례에 대한 소결을 소개합니다. 더 많은 관련react갱 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!