React 性能优化技巧总结

上面的代码中，每次 limit 产生改变，我们城市触发两次状态更新：第一次是为了修改 limit，第二次是为了修改展示的数字列表。这样一来，每次 limit 的变革会带来两次 render 开销：

// 初始状态  
{ limit: 7, numbers: [0, 1, 2, 3, 4, 5, 6]  
// 更新 limit -> 4  
render 1: { limit: 4, numbers: [0, 1, 2, 3, 4, 5, 6] } //   
render 2: { limit: 4, numbers: [0, 2, 3]  

我们的代码逻辑带来了下面的题目：

• 我们触发了比现实必要更多的状态更新；
• 我们呈现了「不持续」的渲染功效，即数字列表与 limit 不匹配。

为了改造，我们应停止在差异的状态更新中改变数字列表。究竟上，我们可以在一次状态更新中搞定：

import React from "react";  
import ReactDOM from "react-dom";  
  
function getRange(limit) {  
  let range = [];  
  
  for (let i = 0; i < limit; i++) {  
    range.push(i);  
  }  
  
  return range;  
}  
  
class App extends React.Component {  
  state = {  
    numbers: [1, 2, 3, 4, 5, 6],  
    limit: 7  
  };  
  
  handleLimitChange = e => {  
    const limit = e.target.value;  
    const limitChanged = limit !== this.state.limit;  
    if (limitChanged) {  
      this.setState({ limit, numbers: getRange(limit) });  
    }  
  };  
  
  render() {  
    return (  
      <div>  
        <input  
          onChange={this.handleLimitChange}  
          placeholder="limit"  
          value={this.state.limit}  
        />  
        {this.state.numbers.map((number, idx) => (  
          <p key={idx}>{number} </p>  
        ))}  
      </div>  
    );  
  }  
}  
  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);  

Tip #3：行使 PureComponent 和 React.memo 以停止不须要的 render 挪用

我们在之前的例子中看到将特定状态值放到更低的层级来停止不须要渲染的要领，不外这并不老是有效。

（编辑：湖南网）

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