Heim > Artikel > Web-Frontend > So schreiben Sie Komponenten in React

So schreiben Sie Komponenten in React

一个新手Original: 2017-10-24 11:00:132018Durchsuche

Inhaltszusammenfassung

Element & Komponente
Funktionalität & Klasse
Präsentation & Container
Zustandsbehaftet und zustandslos
Kontrollierte vs. unkontrollierte kontrollierte KomponenteKontrolliert und unkontrolliert
Zusammensetzung & Vererbung

Element & Komponente

Element

Das Element ist die kleinste Einheit zum Erstellen von React-Anwendungen. Was das Element beschreibt, ist das, was Sie im Browser sehen können. Gemäß dem, worüber wir in der vorherigen Lektion gesprochen haben, verwenden wir beim Schreiben von React-Code im Allgemeinen JSX, um React-Elemente zu beschreiben.

Von der Funktion her können wir React-Elemente als DOM-Elemente verstehen, aber tatsächlich sind React-Elemente nur gewöhnliche Objekte in JS. React implementiert intern eine Reihe von Dingen namens React DOM, oder wir nennen es Virtual DOM, was ein virtueller DOM-Baum ist, der durch ein baumstrukturiertes JS-Objekt simuliert wird.

Apropos, wir können ein wenig darüber sprechen, warum React diese Ebene des virtuellen DOM hat? Wie wir in der Kurseinführung erwähnt haben, ist React schnell und leicht. Der Grund dafür, dass es schnell ist, liegt darin, dass React intern auch einen Diff-Algorithmus mit geringer Komplexität und hoher Effizienz implementiert, der sich von früheren Frameworks wie dem von Angular verwendeten Dirty Check unterscheidet. Nachdem sich die Anwendungsdaten geändert haben, versucht React sein Bestes, so wenig wie möglich zu vergleichen und dann nur die Teile des realen DOM zu ändern, die basierend auf dem virtuellen DOM geändert werden müssen. React nutzt dies auch, um seine hohe Effizienz und hohe Leistung zu erreichen.

Natürlich ist dies nicht die einzige Bedeutung von virtuellem DOM. Diese Schicht separater abstrakter Logik bietet React unbegrenzte Möglichkeiten, wie beispielsweise die Implementierung von React Native, die es Ihnen ermöglicht, JS-Wissen zu beherrschen und es auch anzuwenden Andere Bereiche entwickeln Anwendungen auf dem Plattformsystem, schreiben nicht nur Webseiten oder sogar andere Implementierungen wie React VR oder React Internet of Things, die in Zukunft erscheinen werden.

Allerdings sind Elemente die kleinsten Einheiten im React DOM, die die UI-Schnittstelle beschreiben. Wie wir gerade erwähnt haben, sind Elemente eigentlich gewöhnliche JS-Objekte. Es kann jedoch schwierig sein, es zu verstehen, wenn wir JSX zur Beschreibung von React-Elementen verwenden. Tatsächlich können wir es auch ohne die Verwendung von JSX beschreiben:

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

Komponente

Beachten Sie, dass Elemente und Komponenten in React zwei verschiedene Konzepte sind. Der Grund, warum ich zuvor so oft darüber gesprochen habe, ist, dass ich befürchte, dass die Leute diese beiden Konzepte versehentlich verwechseln. Zunächst müssen wir klarstellen, dass Komponenten auf Elementen aufgebaut sind.

Reacts offizielle Definition von Komponenten bezieht sich auf Module in der UI-Schnittstelle, die unabhängig unterteilt, wiederverwendbar und unabhängig sein können. Tatsächlich ähnelt es der Funktionsdefinition in JS. Es empfängt im Allgemeinen eine Eingabe namens props, gibt dann das entsprechende React-Element zurück, übergibt es an ReactDOM und rendert es schließlich auf dem Bildschirm.

Funktionsdefinition und Klassendefinitionskomponenten Functional & Class

Die neue Version von React bietet zwei Methoden zum Definieren von Komponenten. Natürlich kann auch die bisherige React.createClass weiterhin verwendet werden, wir werden sie hier jedoch nicht in den Rahmen unserer Diskussion einbeziehen.

Die erste Funktionsdefinitionskomponente ist sehr einfach. Wir müssen nur eine Methode definieren, die den Props-Wert empfängt und das React-Element zurückgibt:

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

Sogar die ES6-Pfeilfunktion verwenden Abkürzung, es kann so aussehen:

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

Die zweite ist die Klassendefinitionskomponente, die das in ES6 neu eingeführte Konzept der Klasse verwendet, um die React-Komponente zu definieren: nach

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

Nun, gemäß dem, was wir in der vorherigen Lektion gelernt haben, können Komponenten nach der Definition über die JSX-Beschreibung referenziert werden, und Komponenten können auch verschachtelt und miteinander kombiniert werden.

Präsentation & Container

Als nächstes werden wir einige ausführlichere Konzepte zu Komponenten vorstellen. Es mag jetzt abstrakt und langweilig klingen, aber die folgenden werden vorgestellt. Dieses Konzept wird im Folgenden angewendet Die Schüler können es auch nach dem Studium der nachfolgenden Kurse noch einmal anhören, je nach ihrer tatsächlichen Situation.

Das erste ist der wichtigste Satz von Konzepten: Anzeigekomponenten und Containerkomponenten. Ebenso ist React, wie wir in der Kurseinführung erwähnt haben, kein traditionelles MVVM-Framework, sondern funktioniert nur auf der V-Ebene und der Ansichtsebene. Alle Schüler sollten etwas über MVVM oder MVC wissen. Wie sollten wir mit der Beziehung zwischen Daten und Ansichten in der tatsächlichen Entwicklung umgehen, da unser Framework jetzt nur noch über die V-Schicht verfügt?

Um das Problem zu lösen, dass React nur über eine V-Schicht verfügt, und um unsere Codelogik besser zu unterscheiden, wurde das Konzept der Anzeigekomponente und der Containerkomponente eingeführt. Dies ist auch unsere Best Practice bei der Entwicklung von React-Anwendungen.

Sehen wir uns ein konkretes Beispiel an, um diese beiden Konzepte zu erklären:

class CommentList extends React.Component {
  constructor(props) {
    super(props)
    this.state = { comments: [] }
  }
  
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: &#39;json&#39;,
      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: &#39;Please type here...&#39;}
  }

  handleChange(event) {
    console.log(&#39;Controlled change:&#39;,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: &#39;red&#39;
    }
  }
  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 />
      } />
  );
}

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Probleme mit Vue-Methoden und EreignisbehandlungNächster Artikel：Probleme mit Vue-Methoden und Ereignisbehandlung

In Verbindung stehende Artikel

Mehr sehen