React 性能优化技巧总结(4)

上面的代码中，每次 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 调用

我们在之前的例子中看到将特定状态值放到更低的层级来避免不必要渲染的方法，不过这并不总是有用。

（编辑：ASP站长网）