React でコンポーネントを記述する方法

コンテンツの概要

• 要素とコンポーネント

• 関数とクラス

• プレゼンテーションとコンテナ

• ステートフルコンポーネントとステートレスコンポーネント

• 制御コンポーネントと制御コンポーネント制御

• 構成と継承

要素とコンポーネント

要素

要素は、React アプリケーションを構築するための最小単位です。この要素で説明されている内容は、ブラウザーで表示できる内容です。前のレッスンで話した内容によれば、React コードを記述するときは、通常、JSX を使用して React 要素を記述します。

機能の観点からは、React 要素は DOM 要素として理解できますが、実際には、React 要素は JS の単なる通常のオブジェクトです。 React は、React DOM と呼ばれるもののセットを内部的に実装します。または、仮想 DOM と呼ばれます。DOM ツリーは、ツリー構造の JS オブジェクトを通じてシミュレートされます。

そういえば、なぜ React にこの仮想 DOM レイヤーがあるのか​​について少しお話しましょう。コースの紹介で述べたように、React は高速で軽量です。 React が高速である理由は、この一連の仮想 DOM の存在によるものです。また、React は、Angular で使用されるダーティ チェックなどの以前のフレームワークとは異なり、低複雑かつ高効率な Diff アルゴリズムを内部的に実装しています。アプリケーションデータが変更された後、React は可能な限り比較を少なくし、仮想 DOM に基づいて変更する必要がある実際の DOM の部分のみを変更するよう最善を尽くします。 React もこれを利用して高効率・高性能を実現しています。

もちろん、これが仮想 DOM の唯一の意味ではありません。たとえば、React ネイティブの実装により、JS アプリケーションの知識だけを習得しながら、React に無限の可能性が与えられます。 Web ページを作成するだけでなく、将来登場する React VR や React Internet of Things などの実装も可能です。

そういえば、要素は React DOM の UI インターフェイスを記述する最小単位です。先ほど述べたように、要素は実際には通常の JS オブジェクトです。ただし、JSX を使用して React 要素を記述すると理解しにくい場合があります。実際には、JSX を使用せずに記述することもできます。

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

コンポーネント

React コンセプトについて、私がこれまで何度も話してきた理由は、人々がこれら 2 つのコンセプトを誤って混同してしまうのではないかと心配しているからです。まず最初に、コンポーネントが要素に基づいて構築されていることを明確にする必要があります。

React のコンポーネントの公式定義は、UI インターフェイス内で個別に分割できる、独立した再利用可能な独立したモジュールを指します。実際、これは JS の関数の定義に似ています。通常、props という名前の入力を受け取り、対応する React 要素を返し、それを ReactDOM に渡し、最後に画面に表示します。

関数およびクラス定義コンポーネント 関数およびクラス

React の新しいバージョンでは、コンポーネントを定義する 2 つの方法が提供されます。もちろん、以前の React.createClass も引き続き使用できますが、ここでは説明の範囲には含めません。

最初の関数定義コンポーネントは非常に単純です。props 値を受け取り、React 要素を返すメソッドを定義するだけです:

function Title(props) {
  return <h1>Hello, {props.name}</h1>;
}

ES6 アロー関数の省略形を使用しても、次のようになります:

const Title = props => <h1>Hello, {props.name}</h1>

type はクラス定義コンポーネントで、ES6 で新しく導入されたクラスの概念を使用して React コンポーネントを定義します:

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

次に、前のレッスンで学んだことに従って、コンポーネントを定義した後、次の方法でコンポーネントを定義できます。 JSX によるコンポーネントが参照され、コンポーネントをネストして組み合わせることもできます。

プレゼンテーションとコンテナ

次に、コンポーネントに関するさらに詳細な概念を紹介します。今は抽象的で退屈に聞こえるかもしれませんが、次に紹介する概念は、その後のコースで使用することができます。また、実際の状況に応じて後続のコースを学習した後にもう一度聞いてください。確実に React を理解するのに役立つと思います。

1 つ目は、最も重要な一連の概念、表示コンポーネントとコンテナ コンポーネントです。同様に、コースの紹介で述べたように、React は従来の MVVM フレームワークではなく、V レイヤーとビュー レイヤーでのみ動作します。学生は皆、MVVM または MVC についてある程度の知識を持っている必要があります。では、私たちのフレームワークには V 層しかないので、実際の開発ではデータとビューの関係をどのように扱うべきでしょうか。

React には V レイヤーしかないという問題を解決し、コード ロジックをより適切に区別するために、表示コンポーネントとコンテナ コンポーネントの概念が導入されました。これは、React アプリケーションを開発する際のベスト プラクティスでもあります。

これら 2 つの概念を説明するために具体的な例を見てみましょう:

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 中国語 Web サイトの他の関連記事を参照してください。