React에서 컴포넌트를 작성하는 방법

콘텐츠 요약

• 요소 및 구성 요소

• 기능 및 클래스

• 프리젠테이션 및 컨테이너

• 상태 저장 및 상태 비저장 구성 요소

• 제어 및 제어되지 않는 구성 요소 & Uncontrolled

• 구성 및 상속

Element & Component

Elements

Elements는 React 애플리케이션을 구축하기 위한 가장 작은 단위입니다. 요소가 설명하는 내용은 브라우저에서 볼 수 있는 내용입니다. 이전 강의에서 이야기한 내용에 따르면 일반적으로 React 코드를 작성할 때 JSX를 사용하여 React 요소를 설명합니다.

기능 측면에서 React 요소는 DOM 요소로 이해할 수 있지만 실제로 React 요소는 JS의 일반적인 개체입니다. React는 내부적으로 React DOM이라는 일련의 항목을 구현합니다. 또는 Virtual DOM이라고 부르는데, 이는 가상 DOM입니다. DOM 트리는 트리 구조의 JS 객체를 통해 시뮬레이션됩니다.

말하자면, React가 왜 이 가상 DOM 레이어를 가지고 있는지에 대해 조금 이야기할 수 있을까요? 강좌 소개에서 언급했듯이 React는 빠르고 가볍습니다. 빠른 이유는 바로 이 가상 DOM 집합이 존재하기 때문입니다. React도 내부적으로 Angular에서 사용하는 더티 체크 등 이전 프레임워크와는 달리 복잡성은 낮고 효율성은 높은 Diff 알고리즘을 구현합니다. 애플리케이션 데이터가 변경된 후 React는 가능한 한 적게 비교하려고 최선을 다한 다음 가상 DOM을 기반으로 변경해야 하는 실제 DOM 부분만 변경합니다. React도 이를 사용하여 높은 효율성과 높은 성능을 달성합니다.

물론 이것이 가상 DOM의 유일한 의미는 아닙니다. 이 별도의 추상 논리 계층은 React에 무한한 가능성을 제공합니다. 예를 들어 React Native를 구현하면 JS 애플리케이션을 마스터하는 동시에 다른 플랫폼 시스템에서 개발할 수 있습니다. 웹 페이지를 작성하거나 미래에 나타날 React VR 또는 React Internet of Things와 같은 다른 구현을 작성하는 것뿐입니다.

즉, 요소는 UI 인터페이스를 설명하는 React DOM의 가장 작은 단위입니다. 방금 언급했듯이 요소는 실제로 일반적인 JS 개체입니다. 그러나 JSX를 사용하여 React 요소를 설명하면 이해하기 어려울 수 있습니다. 실제로 JSX를 사용하지 않고도 설명할 수 있습니다.

const element = <h1 id="Hello-nbsp-world">Hello, world</h1>;
// 用JSX描述就相当于是调用React的方法创建了一个对象
const element = React.createElement(&#39;h1&#39;, null, &#39;Hello, world&#39;);

Components

에서 요소와 구성 요소는 서로 다른 것입니다. React Concept, 제가 이전에 그렇게 많이 이야기한 이유는 사람들이 우연히 이 두 개념을 혼동할까봐 걱정되기 때문입니다. 우선, 컴포넌트가 요소 위에 구축된다는 점을 분명히 해야 합니다.

React의 공식 컴포넌트 정의는 UI 인터페이스에서 독립적으로 분할할 수 있는 독립적이고 재사용 가능하며 독립적인 모듈을 의미합니다. 실제로 JS의 함수 정의와 유사합니다. 일반적으로 props라는 입력을 받은 다음 해당 React 요소를 반환하고 이를 ReactDOM에 전달한 후 최종적으로 화면에 렌더링합니다.

함수 및 클래스 정의 구성 요소 기능 및 클래스

새 버전의 React에서는 구성 요소를 정의하는 두 가지 방법을 제공합니다. 물론 이전 React.createClass도 계속 사용할 수 있지만 여기서는 논의 범위에 포함시키지 않겠습니다.

첫 번째 함수 정의 구성 요소는 매우 간단합니다. props 값을 받고 React 요소를 반환하는 메서드만 정의하면 됩니다.

function Title(props) {
  return <h1 id="Hello-nbsp-props-name">Hello, {props.name}</h1>;
}

ES6 화살표 함수 약어를 사용해도 다음과 같이 될 수 있습니다.

const Title = props => <h1 id="Hello-nbsp-props-name">Hello, {props.name}</h1>

두 번째 type은 클래스 정의 컴포넌트로, ES6에 새로 도입된 클래스 개념을 사용해 React 컴포넌트를 정의합니다.

class Title extends React.Component {
  render() {
    return <h1 id="Hello-nbsp-this-props-name">Hello, {this.props.name}</h1>;
  }
}

다음으로, 이전 강의에서 배운 내용에 따라 컴포넌트를 정의한 후 다음과 같이 설명할 수 있습니다. by JSX가 참조되며, 컴포넌트도 서로 중첩 및 결합될 수 있습니다.

Presentational & Container

다음으로 구성 요소에 대한 좀 더 심층적인 개념을 소개합니다. 지금은 추상적이고 지루하게 들릴 수도 있지만, 다음에 소개할 개념은 이후 과정에서 적용할 수 있습니다. 또한 실제 상황에 맞게 후속 강좌를 공부한 후 다시 들어보시면 분명 React를 이해하는 데 도움이 될 것이라고 믿습니다.

첫 번째는 가장 중요한 개념 집합인 디스플레이 구성 요소와 컨테이너 구성 요소입니다. 마찬가지로 강좌 소개에서 언급했듯이 React는 전통적인 MVVM 프레임워크가 아니며 V 레이어와 뷰 레이어에서만 작동합니다. 학생들은 모두 MVVM 또는 MVC에 대해 알아야 합니다. 이제 우리 프레임워크에는 V 계층만 있으므로 실제 개발에서 데이터와 뷰 간의 관계를 어떻게 처리해야 할까요?

React에 V 레이어만 있는 문제를 해결하고 코드 로직을 더 잘 구분하기 위해 디스플레이 구성 요소와 컨테이너 구성 요소의 개념이 도입되었습니다. 이는 React 애플리케이션을 개발할 때의 모범 사례이기도 합니다.

먼저 이 두 가지 개념을 설명하는 구체적인 예를 살펴보겠습니다.

class CommentList extends React.Component {
  constructor(props) {
    super(props)
    this.state = { comments: [] }
  }
  
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments})
      }.bind(this)
    })
  }
  
  renderComment({body, author}) {
    return <li>{body}—{author}</li>
  }

  render() {
    return <ul> {this.state.comments.map(this.renderComment)} </ul>
  }
  
}

这是一个回复列表组件，乍看上去很正常也很合理。但实际上在开发React应用时，我们应该避免写出这样的组件，因为这类组件担负的功能太多了。它只是一个单一的组件，但需要同时负责初始化state，通过ajax获取服务器数据，渲染列表内容，在实际应用中，可能还会有更多的功能依赖。这样，在后续维护的时候，不管是我们要修改服务器数据交互还是列表样式内容，都需要去修改同一个组件，逻辑严重耦合，多个功能在同一个组件中维护也不利于团队协作。

通过应用展示组件与容器组件的概念，我们可以把上述的单一组件重构为一个展示回复列表组件和回复列表容器：

// 展示组件

class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }

  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
  
  render() { 
    return <ul> {this.props.comments.map(this.renderComment)} </ul>;
  } 
  
}

// 容器组件

class CommentListContainer extends React.Component {
  constructor() {
    super()
    this.state = { comments: [] }
  }
  
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: &#39;json&#39;,
      success: function(comments) {
        this.setState({comments: comments})
      }.bind(this)
    })
  }
  
  render() {
    return <CommentList comments={this.state.comments} />
  }
}

像这样回复列表如何展示与如何获取回复数据的逻辑就被分离到两个组件当中了。我们再来明确一下展示组件和容器组件的概念：

展示组件

• 主要负责组件内容如何展示

• 从props接收父组件传递来的数据

• 大多数情况可以通过函数定义组件声明

容器组件

• 主要关注组件数据如何交互

• 拥有自身的state，从服务器获取数据，或与redux等其他数据处理模块协作

• 需要通过类定义组件声明，并包含生命周期函数和其他附加方法

那么这样写具体有什么好处呢？

• 解耦了界面和数据的逻辑

• 更好的可复用性，比如同一个回复列表展示组件可以套用不同数据源的容器组件

• 利于团队协作，一个人负责界面结构，一个人负责数据交互

有状态与无状态组件 Stateful & Stateless

有状态组件

意思是这个组件能够获取储存改变应用或组件本身的状态数据，在React当中也就是state，一些比较明显的特征是我们可以在这样的组件当中看到对this.state的初始化，或this.setState方法的调用等等。

无状态组件

这样的组件一般只接收来自其他组件的数据。一般这样的组件中只能看到对this.props的调用，通常可以用函数定义组件的方式声明。它本身不会掌握应用的状态数据，即使触发事件，也是通过事件处理函数传递到其他有状态组件当中再对state进行操作。

我们还是来看具体的例子比较能清楚地说明问题，与此同时，我们已经介绍了三组概念，为了防止混淆，我这里特意使用了两个展示组件来做示例，其中一个是有状态组件，另一个是无状态组件，也是为了证明，并不是所有的展示组件都是无状态组件，所有的容器组件都是有状态组件。再次强调一下，这是两组不同的概念，以及对组件不同角度的划分方式。

//Stateful Component
class StatefulLink extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      active: false
    }
  }
  handleClick() {
    this.setState({
      active: !this.state.active
    })
  }
  render() {
    return <a 
          style={{ color: this.state.active ? &#39;red&#39; : &#39;black&#39; }}
          onClick={this.handleClick.bind(this)}
         >
           Stateful Link
         </a>
  }
}

// Stateless Component
class StatelessLink extends React.Component {
  constructor(props) {
    super(props)
  }
  handleClick() {
    this.props.handleClick(this.props.router)
  }
  render() {
    const active = this.props.activeRouter === this.props.router
    return (
        <li>
            <a 
              style={{ color: active ? &#39;red&#39; : &#39;black&#39; }}
              onClick={this.handleClick.bind(this)}
             >
                Stateless Link
            </a>
    </li>
    )
  }
}

class Nav extends React.Component {
  constructor() {
    super()
    this.state={activeRouter: &#39;home&#39;}
  }
  handleSwitch(router) {
    this.setState({activeRouter: router})
  }
  render() {
    return (
    <ul>
        <StatelessLink activeRouter={this.state.activeRouter} router=&#39;home&#39; handleClick={this.handleSwitch.bind(this)} />
        <StatelessLink activeRouter={this.state.activeRouter} router=&#39;blog&#39; handleClick={this.handleSwitch.bind(this)} />
        <StatelessLink activeRouter={this.state.activeRouter} router=&#39;about&#39; handleClick={this.handleSwitch.bind(this)} />
    </ul>
    )
  }
}

上述的例子可能稍有些复杂，事实上，在React的实际开发当中，我们编写的组件大部分都是无状态组件。毕竟React的主要作用是编写用户界面。再加上ES6的新特性，绝大多数的无状态组件都可以通过箭头函数简写成类似下面这样：

/* function SimpleButton(props) {
  return <button>{props.text}</button>
} */

const SimpleButton = props => <button>{props.text}</button>

受控与非受控组件 Controlled & Uncontrolled

受控组件

一般涉及到表单元素时我们才会使用这种分类方法，在后面一节课程表单及事件处理中我们还会再次谈论到这个话题。受控组件的值由props或state传入，用户在元素上交互或输入内容会引起应用state的改变。在state改变之后重新渲染组件，我们才能在页面中看到元素中值的变化，假如组件没有绑定事件处理函数改变state，用户的输入是不会起到任何效果的，这也就是“受控”的含义所在。

非受控组件

类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。

我们还是来看具体的例子：

class ControlledInput extends React.Component {
  constructor() {
    super()
    this.state = {value: 'Please type here...'}
  }

  handleChange(event) {
    console.log('Controlled change:',event.target.value)
    this.setState({value: event.target.value})
  }

  render() {
    return (
      <label>
        Controlled Component:
        <input type="text"
               value={this.state.value}
               onChange={(e) => this.handleChange(e)}
        />
      </label>
    );
  }
}

class UncontrolledInput extends React.Component {
  constructor() {
    super();
  }

  handleChange() {
    console.log(&#39;Uncontrolled change:&#39;,this.input.value);
  }

  render() {
    return (
        <label>
          Uncontrolled Component:
          <input type="text"
                 defaultValue=&#39;Please type here...&#39;
                 ref={(input) => this.input = input}
                 onChange={() =>this.handleChange()}
          />
        </label>
    );
  }
}

通常情况下，React当中所有的表单控件都需要是受控组件。但正如我们对受控组件的定义，想让受控组件正常工作，每一个受控组件我们都需要为其编写事件处理函数，有的时候确实会很烦人，比方说一个注册表单你需要写出所有验证姓名电话邮箱验证码的逻辑，当然也有一些小技巧可以让同一个事件处理函数应用在多个表单组件上，但生产开发中并没有多大实际意义。更有可能我们是在对已有的项目进行重构，除了React之外还有一些别的库需要和表单交互，这时候使用非受控组件可能会更方便一些。

组合与继承 Composition & Inheritance

前面我们已经提到了，React当中的组件是通过嵌套或组合的方式实现组件代码复用的。通过props传值和组合使用组件几乎可以满足所有场景下的需求。这样也更符合组件化的理念，就好像使用互相嵌套的DOM元素一样使用React的组件，并不需要引入继承的概念。

当然也不是说我们的代码不能这么写，来看下面这个例子：

// Inheritance
class InheritedButton extends React.Component {
  constructor() {
    super()
    this.state = {
      color: 'red'
    }
  }
  render() {
    return (
    <button style={{backgroundColor: this.state.color}} class=&#39;react-button&#39;>Inherited Button</button>
    )
  }
}

class BlueButton extends InheritedButton {
  constructor() {
    super()
    this.state = {
      color: &#39;#0078e7&#39;
    }
  }
}

// Composition
const CompositedButton = props => <button style={{backgroundColor:props.color}}>Composited Button</button>

const YellowButton = () => <CompositedButton color=&#39;#ffeb3b&#39; />

但继承的写法并不符合React的理念。在React当中props其实是非常强大的，props几乎可以传入任何东西，变量、函数、甚至是组件本身：

function SplitPane(props) {
  return (
    <p className="SplitPane">
      <p className="SplitPane-left">
        {props.left}
      </p>
      <p className="SplitPane-right">
        {props.right}
      </p>
    </p>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

위 내용은 React에서 컴포넌트를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!