React 컴포넌트 패턴에 대한 자세한 소개(예제 포함)

이 글은 React 컴포넌트 패턴에 대한 자세한 소개를 제공합니다(예제 포함). 필요한 친구들이 참고할 수 있기를 바랍니다.

구성 요소는 React의 핵심이므로 이를 활용하는 방법을 아는 것은 훌륭한 디자인 구조를 만드는 데 중요합니다.

컴포넌트란 무엇입니까

React 공식 웹사이트에 따르면 "컴포넌트는 UI를 독립적이고 재사용 가능한 부분으로 분할하고 각 부분을 독립적으로 관리할 수 있게 해줍니다."

처음 npm install을 설치하면 반응을 보게 됩니다. 한 가지는 구성 요소와 해당 API입니다. JavaScript 함수와 유사하게 구성 요소는 "props"라는 입력을 받아들이고 사용자 인터페이스(UI)의 모양을 설명(선언)하는 React 요소를 반환합니다. 이것이 바로 React가 선언적 API라고 불리는 이유입니다. 원하는 UI 모양을 지정하면 React가 나머지를 처리하기 때문입니다.

선언적 스타일은 택시를 타고 목적지까지 갈 때

라고 생각하면 됩니다. 운전사에게 어디로 가야 할지 알려주기만 하면 운전사가 그곳까지 운전해 줄 것입니다. 명령형 프로그래밍은 그 반대입니다. 직접 운전해서 가야 합니다.

Component API

React를 설치한 후 React에서 제공하는 API를 사용할 수 있는데, 기본적으로 5가지 종류로 나눌 수 있습니다.

• render

• state

• props

• context

• lifecycle events

API 위에 있지만 일반적으로 구성 요소는 일부 API와 기타 구성 요소는 다른 API만 사용합니다.

다양한 API를 사용하여 구성 요소를 stateful 구성 요소와 stateless 구성 요소로 나눌 수 있습니다.

• Stateful 구성 요소는 일반적으로 API를 사용합니다: 렌더링, 상태 및 수명 주기 관련 이벤트.

• 상태 비저장 구성 요소는 일반적으로 API(렌더링, 소품 및 컨텍스트)를 사용합니다.

이것이 우리가 컴포넌트 패턴을 소개하려는 이유입니다. 컴포넌트 패턴은 React를 사용할 때 가장 좋은 방법입니다. 컴포넌트 패턴은 원래 데이터 로직과 UI 프리젠테이션 레이어를 분리하기 위해 도입되었습니다. 구성 요소 간에 책임을 나누면 복잡한 UI를 구성하는 데 사용할 수 있는 보다 재사용 가능하고 응집력 있는 구성 요소를 만들 수 있습니다. 이는 확장 가능한 애플리케이션을 구축할 때 특히 중요합니다.

컴포넌트 패턴

일반적으로 다음과 같은 컴포넌트 패턴이 있습니다:

• Container(컨테이너 컴포넌트)

• Presentational(프레젠테이션 컴포넌트)

• Higher order 컴포넌트(고급 컴포넌트)

• 렌더링 콜백(렌더링 콜백)

Container(컨테이너 구성 요소)

"컨테이너 구성 요소는 데이터를 가져온 다음 하위 구성 요소를 렌더링합니다." - Jason Bonta

컨테이너 구성 요소는 데이터 또는 논리입니다. 레이어 및 수명 주기 이벤트를 사용하여 상태 저장 API를 사용하면 상태를
redux 또는 Flux 저장소에 연결하고 데이터 및 콜백을 하위 구성 요소에 props로 전달할 수 있습니다.

컨테이너 컴포넌트의 렌더링 메소드에서 디스플레이 컴포넌트를 사용하여 특정 스타일을 렌더링할 수 있습니다. 모든 상태 API에 액세스하려면 컨테이너 구성 요소를 함수형 메서드를 사용하는 대신 클래스로 선언해야 합니다.

아래 예에는 상태, 수명 주기 이벤트 componentDidMount() 및 렌더링 메서드가 있는 Greeting이라는 클래스 구성 요소가 있습니다.

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

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      <div>
        <h1 id="Hello-this-state-name">Hello! {this.state.name}</h1>
      </div>
    );
  }
}

이때, Greeting 컴포넌트를 컨테이너 컴포넌트로 만들기 위해 UI를 디스플레이 컴포넌트로 나눌 수 있습니다. 이에 대해서는 아래에서 설명하겠습니다.

Display 컴포넌트

Display 컴포넌트는 props, render, context(stateless API)를 사용하며, 라이프사이클 관련 API를 사용할 필요가 없기 때문에 순수 함수를 사용하여 표현을 단순화할 수 있습니다:

const GreetingCard = (props) => {
  return (
    <div>
      <h1 id="Hello-props-name">Hello! {props.name}</h1>
    </div>
  )
}

Display 컴포넌트 props에서만 시작됩니다. 컨테이너 구성 요소(상위 구성 요소)에서 제공할 수 있는 데이터와 콜백을 받습니다.

컨테이너 구성 요소와 프레젠테이션 구성 요소는 각각 데이터/논리 및 프레젠테이션 부분을 해당 구성 요소로 캡슐화합니다.

const GreetingCard = (props) => {
  return (
    <div>
      <h1 id="props-name">{props.name}</h1>
    </div>
  )
}

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

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      <div>
       <greetingcard></greetingcard>
      </div>
    );
  }
}

如你所见，已经将 Greeting 组件中展示相关的部分移动到了它自己的函数式展示组件中。当然，这是一个非常简单的例子——对于更复杂的应用程序，这也是最基本的。

高阶组件

高阶组件是一种函数，它接受一个组件作为参数，然后返回一个新的组件。

这是一种可以对输入组件的 props 进行修改（增删改查）然后返回全新的修改后的组件强大模式，想想 react-router-v4 和 redux 。用了 react-router-v4 后，你可以使用 withRouter() 来继承以 props 形式传递给组件的各种方法。同样，用了redux，就可以使用 connect({})() 方法来将展示组件和 store 中的数据进行连接。

代码演示：

import {withRouter} from 'react-router-dom';
class App extends React.Component {
  constructor() {
    super();
    this.state = {path: ''}
  }
  
  componentDidMount() {
    let pathName = this.props.location.pathname;
    this.setState(() => {
      return {
        path: pathName,
      }
    })
  }
  
  render() {
    return (
      <div>
        <h1 id="Hi-I-m-being-rendered-at-this-state-path">Hi! I'm being rendered at: {this.state.path}</h1>
      </div>
    )
  }
}

export default withRouter(App);

导出组件时，使用用 react-router-v4 的 withRouter()方法封装它。 在 组件 App 的生命周期事件 componentDidMount() 方法中，我们使用this.props.location.pathname 提供的值来更新 state。 由于我们使用了 withRouter 高阶组件，我们可以直接访问 this.props.locationlocation，而不需要直接将 location 作为 props 直接传入，非常方便。

渲染回调

与高阶组件类似，渲染回调或渲染 props 被用于共享或重用组件逻辑。虽然许多开发人员倾向于使用 高阶组件 的可重用逻辑，但是使用 渲染回调 仍然有一些非常好的理由和优势——这是在 Michael Jackson 的“永不写另一个高阶组件”中得到了最好的解释。简而言之，渲染回调减少了命名空间冲突，并更好的说明了逻辑来源。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState(prevState => {
      return {
        count: prevState.count + 1,
      };
    });
  };

  render() {
    return (
      <div>{this.props.children(this.state)}</div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <counter>
        {state => (
          <div>
            <h1 id="The-count-is-state-count">The count is: {state.count}</h1>
          </div>
        )}
      </counter>
    );
  }
}

在 Counter 类中，在 render 方法中嵌入 this.props.children 并将 this.state 作为参数。在 App 类中，我们可以将我们组件封装在 Counter 组件中，因此我可以操作 Counter 组件内的逻辑。

Counter 组件的本质是暴露了 children 这个外部属性，将 children 具体的渲染细节交个 Counter 的使用者，使用的时候只需要将组件传入到 Counter 的 children 中，当然可以使用其他参数，如果 children 不够的话。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

위 내용은 React 컴포넌트 패턴에 대한 자세한 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!