React 性能优化技巧总结

发布时间：2019-02-28 03:46:05 所属栏目：建站来源：落在起风的地方

导读：副标题#e# 本文将从 render 函数的角度总结 React App 的优化技巧。需要提醒的是，文中将涉及 React 16.8.2 版本的内容(也即 Hooks），因此请至少了解 useState 以保证食用效果。正文开始。当我们讨论 React App 的性能问题时，组件的渲染速度是一个重要

我们可以注意到，当状态值不再改变之后，render 的调用就停止了。

总结：对函数式组件来说，状态值改变时才会触发 render 函数的调用。

2. 父容器重新渲染时

import React from "react";  
import ReactDOM from "react-dom";  
  
class App extends React.Component {  
  state = { name: "App" };  
  render() {  
    return (  
      <div className="App">  
        <Foo />  
        <button onClick={() => this.setState({ name: "App" })}>  
          Change name  
        </button>  
      </div>  
    );  
  }  
}  
  
function Foo() {  
  console.log("Foo render");  
  
  return (  
    <div>  
      <h1> Foo </h1>  
    </div>  
  );  
}  
  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/14

首页

尾页