Maison > Article > interface Web > Comment écrire des composants dans React

Comment écrire des composants dans React

一个新手original: 2017-10-24 11:00:132013parcourir

Résumé du contenu

Élément et composant
Fonctionnel et classe
Présentation et Conteneur
Avec état et sans état
Composant contrôlé ou non contrôléContrôlé et non contrôlé
Composition et Héritage

Élément et composant

Élément

L'élément est la plus petite unité permettant de créer une application React. Ce que décrit l'élément est ce que vous pouvez voir dans le navigateur. D'après ce dont nous avons parlé dans la leçon précédente, nous utilisons généralement JSX pour décrire les éléments React lors de l'écriture du code React.

En termes de fonction, nous pouvons comprendre les éléments React comme des éléments DOM mais en fait, les éléments React ne sont que des objets ordinaires en JS ; React implémente en interne un ensemble de choses appelé React DOM, ou nous l'appelons Virtual DOM, qui est un DOM virtuel. L'arborescence DOM est simulée via un objet JS structuré en arborescence.

En parlant de ça, nous pouvons parler un peu de la raison pour laquelle React a cette couche de DOM virtuel ? Comme nous l'avons mentionné dans l'introduction du cours, React est rapide et léger. La raison pour laquelle il est rapide est due à l'existence de cet ensemble de DOM virtuels. React implémente également en interne un algorithme Diff à faible complexité et à haute efficacité, qui est différent des frameworks précédents, tels que le dirty check utilisé par Angular. Une fois les données de l'application modifiées, React fera de son mieux pour comparer le moins possible, puis ne modifiera que les parties du DOM réel qui doivent être modifiées en fonction du DOM virtuel. React l'utilise également pour atteindre sa haute efficacité et ses hautes performances.

Bien sûr, ce n'est pas la seule signification du DOM virtuel. Cette couche de logique abstraite séparée donne à React des possibilités illimitées, comme l'implémentation de React Native, qui vous permet de maîtriser les connaissances JS et également de les appliquer dans. d'autres domaines. Développez des applications sur le système de plate-forme, pas seulement écrire des pages Web, ou même d'autres implémentations telles que React VR ou React IoT qui apparaîtront plus tard.

Cela dit, les éléments sont les plus petites unités de React DOM qui décrivent l'interface utilisateur. Comme nous venons de le mentionner, les éléments sont en réalité des objets JS ordinaires. Cependant, il peut être difficile de comprendre quand on utilise JSX pour décrire des éléments React. En fait, on peut aussi le décrire sans utiliser JSX :

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

Component

À noter que les éléments et les composants sont deux concepts différents dans React. La raison pour laquelle j'en ai tant parlé auparavant est que je crains que les gens ne confondent accidentellement ces deux concepts. Tout d’abord, nous devons préciser que les composants sont construits sur des éléments.

La définition officielle des composants de React fait référence aux modules de l'interface utilisateur qui peuvent être divisés, réutilisables et indépendants de manière indépendante. En fait, cela est similaire à la définition de fonction dans JS. Il reçoit généralement une entrée nommée props, puis renvoie l'élément React correspondant, puis le transmet à ReactDOM et enfin le restitue à l'écran.

Composants de définition de fonction et de définition de classe Functional & Class

La nouvelle version de React propose deux méthodes de définition de composants. Bien entendu, l'ancien React.createClass peut également continuer à être utilisé, mais nous ne l'inclurons pas ici dans le cadre de notre discussion.

Le premier composant de définition de fonction est très simple. Il suffit de définir une méthode qui reçoit la valeur des accessoires et renvoie l'élément React :

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

Utilisez même la fonction flèche ES6 après le abréviation, cela peut devenir comme ceci :

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

Le deuxième est le composant de définition de classe, qui consiste à utiliser le concept de classe nouvellement introduit dans ES6 pour définir le composant React : après

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

Eh bien, d'après ce que nous avons appris dans la leçon précédente, une fois les composants définis, ils peuvent être référencés via la description JSX, et les composants peuvent également être imbriqués et combinés les uns avec les autres.

Présentationnel et conteneur

Ensuite, nous présenterons quelques concepts plus approfondis sur les composants Cela peut sembler abstrait et ennuyeux maintenant, mais les suivants seront introduits. Ce concept sera appliqué ultérieurement. Les étudiants peuvent également revenir et l'écouter après avoir étudié les cours suivants en fonction de leur situation réelle. Je pense que cela vous aidera certainement à comprendre React.

Le premier est l'ensemble de concepts le plus important : les composants d'affichage et les composants de conteneur. De même, comme nous l'avons mentionné dans l'introduction du cours, React n'est pas un framework MVVM traditionnel. Il ne fonctionne que sur la couche V et la couche vue. Les étudiants devraient tous connaître quelque chose sur MVVM ou MVC. Ainsi, puisque notre framework n'a désormais que la couche V, comment devrions-nous gérer la relation entre les données et les vues dans le développement réel ?

Afin de résoudre le problème selon lequel React n'a qu'une couche V et de mieux distinguer notre logique de code, le concept de composant d'affichage et de composant conteneur a été introduit. C'est également notre meilleure pratique lors du développement d'applications React.

Regardons d'abord un exemple précis pour expliquer ces deux concepts :

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 />
      } />
  );
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Problèmes avec les méthodes Vue et la gestion des événementsArticle suivant：Problèmes avec les méthodes Vue et la gestion des événements

Articles Liés

Voir plus