4 conseils pratiques pour développer des applications React-js tutoriel-php.cn

4 conseils pratiques pour développer des applications React

[Recommandations de sujets connexes : réagir aux questions d'entretien (2020)]

Contexte

Hooks est très populaire depuis son lancement. Il a changé la façon dont nous écrivons le code React et nous aide à écrire du code plus concis.

L'article d'aujourd'hui ne concerne pas les Hooks. En plus des Hooks, il existe de nombreuses techniques pratiques qui peuvent nous aider à écrire du 简洁清晰 code.

Aujourd'hui, j'ai compilé quelques techniques, dont certaines que j'ai utilisées dans des projets d'entreprise 实践的. Maintenant, je les ai compilées pour les partager avec vous, j'espère qu'elles seront utiles à tout le monde 有所启发.

Texte

1. Utilisez une chaîne pour définir un élément React

Un exemple simple :

// 我们可以通过把一个字符串'p' 赋值给一个变量， 就像：
import React from 'react'

const MyComponent = 'p'

function App() {
  return (
    
      <mycomponent>
        <h3>I am inside a {'</h3>
<p></p>'} element
      </mycomponent>
    >
  )
}

Copier après la connexion

React appellera React.createElement en interne et utilisera cette chaîne pour générer cet élément.

De plus, vous pouvez également définir explicitement component pour déterminer le contenu du rendu, par exemple :

// 定义一个MyComponent
function MyComponent({ component: Component = 'p', name, age, email }) {
  
  return (
    <component>
      <h1>Hi {name} </h1>
      
        <h6>You are {age} years old</h6>
        <small>Your email is {email}</small>
      >
    </component>
  )
}

Copier après la connexion

Méthode applicable :

function App() {
  return (
    
      <mycomponent>
    >
  )
}</mycomponent>

Copier après la connexion

De cette manière, vous pouvez également Transmettez un composant personnalisé, tel que :

function Dashboard({ children }) {
  return (
    
      {children}
    
  )
}

function App() {
  return (
    
      <mycomponent>
    >
  )
}</mycomponent>

Copier après la connexion

Si vous rencontrez un traitement de 一类相似的 éléments ou composants, vous pouvez les résumer de cette manière personnalisée et simplifier votre code.

Donnez un exemple concret :

Par exemple, nous faisons maintenant une demande pour l'emballage de marchandises, qui peut être réalisé individuellement ou par lots. Des composants personnalisés peuvent être écrits pour les points communs. :

import React from 'react'
import withTranslate from '@components/withTranslate'
import PackComponent from './PackComponent'
import usePack, { check } from './usePack'

let PackEditor = (props) => {
  const packRes = usePack(props)
  return (
    <packcomponent></packcomponent>
  )
}

PackEditor = withTranslate(PackEditor)
PackEditor.check = check

export default PackEditor

Copier après la connexion

De cette façon, il peut être utilisé de manière flexible dans différents modules métiers, ce qui est très pratique.

2. Définir les limites d'erreur

En Javascript, nous utilisons tous try/catch pour détecter les exceptions qui peuvent survenir, dans catchGérer erreurs dans. Par exemple :

function getFromLocalStorage(key, value) {
  try {
    const data = window.localStorage.get(key)
    return JSON.parse(data)
  } catch (error) {
    console.error
  }
}

Copier après la connexion

De cette façon, même si une erreur survient, notre application ne plantera pas avec un écran blanc.

React est aussi Javascript en dernière analyse, et il n'y a pas de différence essentielle, donc il n'y a aucun problème à utiliser try/catch de la même manière.

Cependant, en raison du mécanisme d'implémentation de React, les erreurs Javascript se produisant à l'intérieur du composant détruiront l'état interne et le rendu générera une erreur :

https://github.com/facebook/ react/ issues/4026

4 conseils pratiques pour développer des applications React

Sur la base des raisons ci-dessus, l'équipe React a introduit Error Boundaries :

https://reactjs.org/docs/ error-boundaries.html

Error boundaries, est en fait un composant React. Vous pouvez utiliser un composant pour gérer toutes les informations d'erreur qu'il capture.

Lorsque l'arborescence des composants s'effondre, votre interface utilisateur personnalisée peut également être affichée comme solution de secours.

Regardez l'exemple officiel fourni par React :
https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }
  
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true }
  }
  
  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo)
  }
  
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>
    }
    return this.props.children
  }
}

Copier après la connexion

Utilisation :

<errorboundary>
  <mywidget></mywidget>
</errorboundary>

Copier après la connexion

Démo en direct par Dan Abramov :

https://codepen.io/gaearon/pen/wqvxGa?editors=0010

3. commander des composants

Pour faire simple, ce que l'on appelle le composant d'ordre élevé consiste à lancer un composant, à ajouter des attributs ou des opérations, puis à le jeter.

De manière générale, vous pouvez résumer certains composants avec 共同点的 en un seul 高阶组件, puis 复用 dans différents modules.

Par exemple, dans notre système, il existe un type de bouton qui doit être ajouté avec un border, qui est utilisé à de nombreux endroits. Nous le résumons :

import React from 'react'

// Higher order component
const withBorder = (Component, customStyle) => {
  class WithBorder extends React.Component {
    render() {
      const style = {
        border: this.props.customStyle ? this.props.customStyle.border : '3px solid teal'
      }
      return <component></component>
    }
  }
  
  return WithBorder
}

function MyComponent({ style, ...rest }) {
  return (
    <p>
        </p><h2>
          This is my component and I am expecting some styles.
        </h2>
    
  )
}

export default withBorder(MyComponent, { border: '4px solid teal' })

Copier après la connexion

MyComponent décoré. withBorder, Il a pour fonction d'unifier la bordure si vous souhaitez la modifier plus tard, vous pouvez le faire dans ce 中间层, ce qui est très pratique.

Dans mon projet, j'utilise également certains composants d'ordre élevé. Pour donner un exemple précis :

PackEditor = withTranslate(PackEditor)

Copier après la connexion

Notre PackEditor est un composant amélioré. Quelles fonctions ont été ajoutées ?

Comme son nom l'indique, withTranslate, ajoute une fonction de traduction Voyons comment ce composant est implémenté :

import React from 'react'
import { Provider } from 'react-redux'
import { injectIntl } from 'react-intl'
import { store } from '@redux/store'
import { Intl } from './Locale'

const withTranslate = BaseComponent => (props) => {
  // avoid create a new component on re-render
  const IntlComponent = React.useMemo(() => injectIntl(
    ({ intl, ...others }) => (
      <basecomponent> { // 注入翻译方法
          if (!id) { return '' }
          return intl.formatMessage(
            typeof id === 'string' ? { id } : id,
            values
          )
        }}
        {...others}
      />
    )
  ), [])

  IntlComponent.displayName = `withTranslate(${BaseComponent.displayName || 'BaseComponent'})`
  
  return (
    <provider>
      <intl>
        <intlcomponent></intlcomponent>
      </intl>
    </provider>
  )
}

export default withTranslate</basecomponent>

Copier après la connexion

L'utilisation est très intelligente :

const Editor = withTranslate(({
  // ...
  translate,
}) => {
  // ...
   return (
     
      {translate('xxx')}}
     >
   )
})

Copier après la connexion

Très pratique. .

4. Render props

Rrender prop fait référence à un accessoire 组件之间 qui utilise une valeur comme fonction dans React 共享代码 Simple la technologie, similaire à HOC, se situe entre les composants. 逻辑复用问题

Plus précisément, le prop Render est une fonction utilisée pour indiquer au composant que

est requis. 渲染什么内容

Voici un exemple simple :

Le composant suivant suit la position de la souris dans une application Web :

class Mouse extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <p>
        </p><p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      
        <h1>移动鼠标!</h1>
        <mouse></mouse>
      >
    );
  }
}

Copier après la connexion

Lorsque le curseur se déplace sur l'écran, le composant affiche son (x ,y) coordonner.

Maintenant la question est :

Comment réutiliser ce comportement dans un autre composant ?

换个说法，若另一个组件需要知道鼠标位置，我们能否封装这一行为，以便轻松地与其他组件共享它？？

假设产品想要这样一个功能：在屏幕上呈现一张在屏幕上追逐鼠标的猫的图片。

我们或许会使用

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img  alt="4 conseils pratiques pour développer des applications React" >
    );
  }
}

Copier après la connexion

这个需求如此简单，你可能就直接修改Mouse组件了：

class Mouse extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <p>
        <cat></cat>
      </p>
    );
  }
}

Copier après la connexion

巴适～简单粗暴，一分钟完成任务。

可是，如果下次产品再要想加条狗呢？

以上的例子，虽然可以完成了猫追鼠标的需求，还没有达到以可复用的方式真正封装行为的目标。

当我们想要鼠标位置用于不同的用例时，我们必须创建一个新的组件，专门为该用例呈现一些东西.

这也是 render prop 的来历：

我们可以提供一个带有函数 prop 的 <mouse></mouse> 组件，它能够动态决定什么需要渲染的，而不是将 硬编码到组件里.

修改一下上面的代码：

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img  alt="4 conseils pratiques pour développer des applications React" >
    );
  }
}

class Mouse extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      
        {this.props.render(this.state)}
      
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      
        
移动鼠标!
         (
          
        )}/>

Copier après la connexion

); } }

提供了一个render 方法，让动态决定什么需要渲染。

事实上，render prop 是因为模式才被称为 render prop ，不一定要用名为 render 的 prop 来使用这种模式。

任何被用于告知组件需要渲染什么内容的函数 prop, 在技术上都可以被称为 "render prop".

另外，关于 render prop 一个有趣的事情是你可以使用带有 render prop 的常规组件来实现大多数高阶组件 (HOC)。

例如，如果你更喜欢使用 withMouse HOC 而不是组件，你可以使用带有 render prop 的常规轻松创建一个：

function withMouse(Component) {
  return class extends React.Component {
    render() {
      return (
        <mouse> (
          <component></component>
        )}/>
      );
    }
  }
}</mouse>

Copier après la connexion

也是非常的简洁清晰。

有一点需要注意的是，如果你在定义的render函数里创建函数，使用 render prop 会抵消使用 React.PureComponent 带来的优势。

因为浅比较 props 的时候总会得到 false，并且在这种情况下每一个 render 对于 render prop 将会生成一个新的值。

class Mouse extends React.PureComponent {
  // 与上面相同的代码......
}

class MouseTracker extends React.Component {
  render() {
    return (
      
        <mouse> ( // 这是不好的！ 每个渲染的 `render` prop的值将会是不同的。
          <cat></cat>
        )}/>
      >
    );
  }
}</mouse>

Copier après la connexion

在这样例子中，每次渲染，它会生成一个新的函数作为的 prop，因而在同时也抵消了继承自 React.PureComponent 的组件的效果.

为了绕过这一问题，有时你可以定义一个 prop 作为实例方法，类似这样：

class MouseTracker extends React.Component {
  renderTheCat(mouse) {
    return <cat></cat>;
  }

  render() {
    return (
      <p>
        </p><h1>Move the mouse around!</h1>
        <mouse></mouse>
      
    );
  }
}

Copier après la connexion

5.组件性能

性能优化是永恒的主题，这里不一一细说，提供积分资源供你参考：