Question

您个人了解和测试过的一些常规技巧可以提高React.js组件的性能？

Answer 1

就我个人而言，我能提供的最佳建议是避免编写逻辑，以使您的组件状态经常更新。您不希望组件不断调用this.setState({})，因为它会造成某种形式的延迟，从而可能在视觉和性能上影响您的应用程序。

绝对避免编写类似的内容：

componentDidUpdate(){
   this.setStatE({
      field: this.props.newData
   })
}

但是在这个主题上，也要利用生命周期方法，特别是componentDidMount()和componentDidUpdate()，这些方法对于控制组件内部的逻辑非常有用。通过某种方式，它们还可以通过为您的组件提供一种处理数据的呼吸机制来增强您的组件。

最后，这通常是一种偏爱，但是，如果您希望具有良好的代码可读性，我建议创建一个函数来生成您的标记，而不是直接将其编写在渲染方法中。

考虑以下代码：

import React from "react"

class Example extends React.Component{
    state = {
      tests: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]
    }

    render(){
      const tests = this.state.tests
      return(
         <div>
            { tests.length > 0 && tests.map((test) => {
               return <div>{test.name}</div>   
             })}
         </div>
      )
    }
}

这段代码按原样是很好的，但是您只需为标记添加另一个功能，就可以使其他人更容易阅读。

修订：

import React from "react"

class Example extends React.Component{
    state = {
      tests: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]
    }

    createTests = () => {
       const tests = this.state.tests
       if(tests.length > 0){
          return tests.map((test) => {
               return <div>{test.name}</div>
          })
       }
    }

    render(){
      const tests = this.state.tests
      return(
         <div>
             {this.createTests()}
         </div>
      )
    }
}

做同样的事情，但是现在很清楚我们正在尝试在render方法中完成什么。

Answer 2

我们已经完成了几件事。我们使用了一个插件来计算我们有多少浪费的渲染，这是60％。为了解决这个问题，我们做了几件事。 1.我们可以使用生命周期挂钩来确定属性是否发生任何变化。 2.最小化组件之间的父子关系。 3.如果我们使用任何一种redux来管理状态，那么我们应该连接顶层组件来存储数据并将其作为道具传递给子组件。 4.对于asyc调用，如果要在compoentDidMount或ComponentWillmount中使用它，就应该小心，就像是否在子组件中需要asyc调用的数据一样。

Answer 3

有很多优化您的React Application的选项，太多无法涵盖一个答案。我的建议是，启动您的App，打开DevTools并转到Audit，开始Lighthouse测试。测试将显示可以执行的某些操作，以优化您的代码，并提供可供阅读的资源。

如果您还有更具体的问题，请询问。您当前的问题有点太多，无法涵盖在一个答案中。或发布您要优化的代码。

React.JS性能全面提升

3 个答案: