4 praktische Tipps für die Entwicklung von React Apps

[Ähnliche Themenempfehlungen: Interviewfragen reagieren (2020)]

Hintergrund

Hooks erfreut sich seit seiner Einführung großer Beliebtheit. Es hat die Art und Weise, wie wir React-Code schreiben, verändert und hilft uns, prägnanteren Code zu schreiben.

Im heutigen Artikel geht es nicht um Hooks. Zusätzlich zu Hooks gibt es viele praktische Techniken, die uns beim Schreiben von 简洁清晰 Code helfen können.

Heute habe ich einige Techniken zusammengestellt, von denen ich einige in Unternehmensprojekten verwendet habe 实践的 Jetzt habe ich sie zusammengestellt, um sie mit Ihnen zu teilen. Ich hoffe, sie werden für alle hilfreich sein. 有所启发

Text

1. Verwenden Sie eine Zeichenfolge, um ein React-Element zu definieren

Ein einfaches Beispiel:

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

const MyComponent = 'p'

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

React ruft

intern auf und verwendet diese Zeichenfolge, um dieses Element zu generieren. React.createElement

Darüber hinaus können Sie

auch explizit definieren, um den Rendering-Inhalt zu bestimmen, zum Beispiel: component

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

Anwendbare Methode:

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

Auf diese Weise können Sie auch Übergeben Sie eine benutzerdefinierte Komponente, wie zum Beispiel:

function Dashboard({ children }) {
  return (
    

      {children}
    
  )
}

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

Wenn Sie auf die Verarbeitung von

-Elementen oder -Komponenten stoßen, können Sie diese auf diese benutzerdefinierte Weise abstrahieren und Ihren Code vereinfachen. 一类相似的

Geben Sie ein Beispiel aus der Praxis:

Wenn wir beispielsweise Waren jetzt verpacken müssen, können wir sie einzeln oder in Chargen verpacken. Wir können kundenspezifische Komponenten basierend auf den gemeinsamen Punkten schreiben:

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

Auf diese Weise kann es flexibel in verschiedenen Geschäftsmodulen eingesetzt werden, was sehr praktisch ist.

2. Definieren Sie Fehlergrenzen

In Javascript verwenden wir alle

, um Ausnahmen abzufangen, die in try/catchHandle auftreten können Fehler in. Zum Beispiel: catch

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

Auf diese Weise stürzt unsere Anwendung auch dann nicht mit einem weißen Bildschirm ab, wenn ein Fehler auftritt.

React ist letztendlich auch Javascript und es gibt im Wesentlichen keinen Unterschied, sodass es kein Problem darstellt,

auf die gleiche Weise zu verwenden. try/catch

Aufgrund des React-Implementierungsmechanismus zerstören jedoch innerhalb der Komponente auftretende Javascript-Fehler den internen Status und beim Rendern wird ein Fehler generiert:

https://github.com/facebook/ reagieren/ Issues/4026

Basierend auf den oben genannten Gründen hat das React-Team

eingeführt:Error Boundaries

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

ist eigentlich eine React-Komponente. Sie können eine Komponente verwenden, um alle von ihr erfassten Fehlerinformationen zu verarbeiten. Error boundaries

Wenn der Komponentenbaum ausgeblendet wird, kann Ihre angepasste Benutzeroberfläche auch als Fallback angezeigt werden.

Sehen Sie sich das offizielle Beispiel von React an:

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 id="Something-went-wrong">Something went wrong.</h1>
    }
    return this.props.children
  }
}

Verwendung:

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

Live-Demo von Dan Abramov:

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

3. Komponenten bestellen

Einfach ausgedrückt besteht die sogenannte Komponente höherer Ordnung darin, dass Sie eine Komponente einwerfen, einige Attribute oder Operationen hinzufügen und sie dann wegwerfen.

Im Allgemeinen können Sie einige Komponenten mit

in ein 共同点的 und dann 高阶组件 in verschiedene Module abstrahieren. 复用

Zum Beispiel gibt es in unserem System eine Art Schaltfläche, die mit einem

hinzugefügt werden muss, was an vielen Stellen verwendet wird: border

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' })

MyComponent dekoriert mitBorderEs hat die Funktion, den Rand zu vereinheitlichen. Wenn Sie ihn später ändern möchten, können Sie dies in diesem

tun, was sehr praktisch ist. 中间层

In meinem Projekt verwende ich auch einige höherwertige Komponenten:

PackEditor = withTranslate(PackEditor)

Unser

ist eine erweiterte Komponente. PackEditor

Wie der Name schon sagt, fügt

eine Übersetzungsfunktion hinzu. Sehen wir uns an, wie diese Komponente implementiert wird: withTranslate

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>

Die Verwendung ist sehr clever:

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

Sehr praktisch .

4. Render-Requisiten

Rrender-Requisite bezieht sich auf eine Requisite

, die einen Wert als Funktion in React 组件之间 verwendet Die Technologie befindet sich, ähnlich wie bei HOC, zwischen den Komponenten. 共享代码逻辑复用问题Genauer gesagt ist die Render-Requisite eine Funktion, die verwendet wird, um der Komponente mitzuteilen, dass

erforderlich ist.

渲染什么内容Hier ist ein einfaches Beispiel:

Die folgende Komponente verfolgt die Mausposition in einer Webanwendung:

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 id="移动鼠标">移动鼠标!</h1>
        <mouse></mouse>
      >
    );
  }
}

Während sich der Cursor über den Bildschirm bewegt, zeigt die Komponente ihre (x ,y) Koordinate.

Die Frage ist nun:

Wie können wir dieses Verhalten in einer anderen Komponente wiederverwenden?

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

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

我们或许会使用

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img  src="/static/imghwm/default1.png" data-src="/cat.jpg" class="lazy" alt="4 praktische Tipps für die Entwicklung von React Apps" >
    );
  }
}

这个需求如此简单，你可能就直接修改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>
    );
  }
}

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

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

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

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

这也是 render prop 的来历：

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

修改一下上面的代码：

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img  src="/static/imghwm/default1.png" data-src="/cat.jpg" class="lazy" alt="4 praktische Tipps für die Entwicklung von React Apps" >
    );
  }
}

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 (
      

        
移动鼠标!
         (
          
        )}/>
      

    );   } }

提供了一个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>

也是非常的简洁清晰。

有一点需要注意的是， 如果你在定义的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>

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

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

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

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

5.组件性能

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

• React.memo https://reactjs.org/docs/reac...
• React.useMemo  https://flaviocopes.com/react...
• React.useCallback https://reactjs.org/docs/hook...
• React.PureComponent https://reactjs.org/docs/reac...
• Optimizing performance https://reactjs.org/docs/opti...

总结

以上几点都是我们经常要使用的技巧， 简单实用， 分享给大家， 希望能给大家带来一些帮助或启发，谢谢。

推荐阅读：React在线手册

Das obige ist der detaillierte Inhalt von4 praktische Tipps für die Entwicklung von React Apps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!