Reactjs React.JS整体性能提升

对于React.js组件，您个人知道并测试过哪些通用技巧和技巧可以提高性能？

我个人能提供的最佳技巧是避免编写经常更新组件状态的逻辑。您不希望您的组件不断调用

this.setState（{}）

，因为它会产生一种扭曲的延迟，这可能会影响应用程序的视觉和性能

绝对不要写这样的东西：

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

但是，在这个主题上，使用生命周期方法，特别是

componentDidMount（）

和

componentdiddupdate（）

这些方法对于控制组件内部的逻辑非常有用。在某种程度上，他们还可以通过为组件提供一种处理数据的呼吸机制来增强组件

最后，这更像是一个首选项，但如果您希望具有良好的代码可读性，我建议创建一个函数来生成标记，而不是直接在渲染方法中编写它

考虑到以下准则：

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

从“React”导入React
类示例扩展了React.Component{
状态={
测试：[{id:1，名称：“test1”}，{id:2，名称：“test2”}，{id:3，名称：“test3”}]
}
render（）{
常量测试=this.state.tests
返回(
{tests.length>0&&tests.map（（test）=>{
返回{test.name}
})}
)
}
}

这段代码是非常好的，但是您可以通过为您的标记生成另一个函数来让其他人更容易阅读

修订：

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

从“React”导入React
类示例扩展了React.Component{
状态={
测试：[{id:1，名称：“test1”}，{id:2，名称：“test2”}，{id:3，名称：“test3”}]
}
createTests=（）=>{
常量测试=this.state.tests
如果（测试长度>0）{
返回测试.map（（测试）=>{
返回{test.name}
})
}
}
render（）{
常量测试=this.state.tests
返回(
{this.createTests（）}
)
}
}

---

做同样的事情，但是现在我们很清楚我们在渲染方法中要实现什么。

我们已经实现了两件事情。 我们使用了一个插件来计算我们浪费了多少渲染，这是60%。 为了解决这个问题，我们做了一些事情。 1.我们可以使用生命周期连接来确定财产是否有任何变化。 2.最小化组件之间的父子关系。 3.如果我们使用任何类型的redux来管理状态，那么我们应该让顶级组件连接起来存储数据，并将数据作为道具传递给子组件。

---

4.对于Asyc call，如果我们希望在ComponentDidMount或ComponentWillmount中使用Asyc call数据，则应谨慎行事，因为Asyc call数据是否需要在子组件中使用。

有许多选项可以优化您的React应用程序，一个答案无法涵盖太多内容。我的建议是，启动你的应用程序，打开DevTools，去审计，开始灯塔测试。该测试将显示某些可以优化代码的操作，以及可阅读的资源

如果你有更具体的问题，那就问吧。你现在的问题有点太多了，一个答案无法涵盖。或邮政编码，这是您想要优化的