开发React应用的实用技巧有哪些-创新互联

这篇文章将为大家详细讲解有关开发React应用的实用技巧有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联-专业网站定制、快速模板网站建设、高性价比苏尼特右网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式苏尼特右网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖苏尼特右地区。费用合理售后完善,十载实体公司更值得信赖。

背景

Hooks 自推出以来就很火, 它改变了我们编写React 代码的方式, 有助于我们写更简洁的代码。

正文

1. 使用字符串来定义一个React元素

举个简单的例子:

// 我们可以通过把一个字符串'p' 赋值给一个变量, 就像:import React from 'react'const MyComponent = 'p'function App() {  return (    <>              

I am inside a {''} element

      
      )}

React 内部会调用React.createElement, 使用这个字符串来生成这个元素。

另外, 你也可以显式的定义component 来决定渲染的内容, 比如:

// 定义一个MyComponentfunction MyComponent({ component: Component = 'p', name, age, email }) {    return (          

Hi {name} 

      <>        You are {age} years old        Your email is {email}          
  )}

适用方式:

function App() {  return (    <>            )}

这种方式, 你也可以传入一个自定义的组件, 比如:

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

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

如果你遇到处理一类相似的元素或者组件,可以通过这种自定义的方式抽象出来,简化你的代码。

举个现实的例子:

比如我们现在要做一个货物打包的需求, 可以单个打, 也可以批量打, 针对共同点可以写自定义组件:

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 (      )}PackEditor = withTranslate(PackEditor)PackEditor.check = checkexport default PackEditor

这样在不同的业务模块中, 就可以灵活的使用了, 非常方便。

2. 定义错误边界

在Javascript里,我们都是使用try/catch 来捕捉可能发生的异常,在catch中处理错误。 比如:

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

这样, 即便发生了错误, 我们的应用也不至于崩溃白屏。

React 归根结底也是Javascript,本质上没什么不同, 所以同样的使用try/catch  也没有问题。

然而, 由于React 实现机制的原因, 发生在组件内部的Javascript 错误会破坏内部状态, render会产生错误:

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

基于以上原因,React 团队引入了Error Boundaries:

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

Error boundaries, 其实就是React组件, 你可以用找个组件来处理它捕捉到的任何错误信息。

当组件树崩溃的时候,也可以显示你自定义的UI,作为回退。

看 React 官方提供的例子:/tupian/20230522/error-boundaries.html>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 

Something went wrong.

    }    return this.props.children  }}

使用方式:

  

Live Demo By Dan Abramov:

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

3.高阶组件

通俗点讲, 所谓高阶组件就是, 你丢一个组件进去, 增加一些属性或操作, 再丢出来。

一般来说, 你可以把一些具备共同点的组件抽象成一个高阶组件, 然后再不同的模块中复用

比如, 我们的系统中, 有一类按钮要加个border, 很多地方都要用到, 我们把它抽象出来:

import React from 'react'// Higher order componentconst withBorder = (Component, customStyle) => {  class WithBorder extends React.Component {    render() {      const style = {        border: this.props.customStyle ? this.props.customStyle.border : '3px solid teal'      }      return     }  }    return WithBorder}function MyComponent({ style, ...rest }) {  return (            

          This is my component and I am expecting some styles.        

    

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

经过withBorder装饰的MyComponent组件, 就具备了统一border这项功能, 后面如果如果要做修改, 就可以在这个中间层统一处理, 非常方便。

在我的项目里, 也用了一些高阶组件, 举个具体的例子:

PackEditor = withTranslate(PackEditor)

我们的这个PackEditor 就是一个增强过的组件, 增加了什么功能呢?

正如名字表述的,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 }) => (       { // 注入翻译方法          if (!id) { return '' }          return intl.formatMessage(            typeof id === 'string' ? { id } : id,            values          )        }}        {...others}      />    )  ), [])  IntlComponent.displayName = `withTranslate(${BaseComponent.displayName || 'BaseComponent'})`    return (                              )}export default withTranslate

用法很灵过:

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

十分的方便。

4. Render props

Rrender prop 是指一种在 React组件之间使用一个值为函数的 prop共享代码的简单技术, 和 HOC 类似, 都是组件间的逻辑复用问题

更具体地说,Render prop 是一个用于告知组件需要渲染什么内容的函数。

下面看一下简单的例子:

以下组件跟踪 Web 应用程序中的鼠标位置:

class Mouse extends React.Component {  state = { x: 0, y: 0 };  handleMouseMove = (event) => {    this.setState({      x: event.clientX,      y: event.clientY    });  }  render() {    return (              

The current mouse position is ({this.state.x}, {this.state.y})

      

    );  }}class MouseTracker extends React.Component {  render() {    return (      <>        

移动鼠标!

                  );  }}

当光标在屏幕上移动时,组件显示其(x,y)坐标。

现在的问题是:

我们如何在另一个组件中复用这个行为?

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

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

我们或许会使用

class Cat extends React.Component {  render() {    const mouse = this.props.mouse;    return (          );  }}

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

class Mouse extends React.Component {  state = { x: 0, y: 0 };  handleMouseMove = (event) => {    this.setState({      x: event.clientX,      y: event.clientY    });  }  render() {    return (                    

    );  }}

巴适~ 简单粗暴, 一分钟完成任务。

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

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

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

这也是 render prop 的来历:

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

修改一下上面的代码:

class Cat extends React.Component {  render() {    const mouse = this.props.mouse;    return (          );  }}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 (         (                  )}/>      );    }  }}

也是非常的简洁清晰。

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

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

class Mouse extends React.PureComponent {  // 与上面相同的代码......}class MouseTracker extends React.Component {  render() {    return (      <>         ( // 这是不好的! 每个渲染的 `render` prop的值将会是不同的。                  )}/>          );  }}

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

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

class MouseTracker extends React.Component {  renderTheCat(mouse) {    return ;  }  render() {    return (      

        

Move the mouse around!

              

    );  }}

关于开发React应用的实用技巧有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前标题:开发React应用的实用技巧有哪些-创新互联
当前链接:http://myzitong.com/article/peiph.html