React 性能优化技巧总结

虽然， CounterLabel 从头渲染是正常的，由于 count 产生了变革，天然要从头渲染；可是对付 List 而言，就完满是不须要的更新了，由于它的渲染与 count 无关。 尽量 React 并不会在 reconciliation 阶段真的更新 DOM，事实完全没变革，可是如故会执行 diffing 阶段来对前后的树举办比拟，这如故存在机能开销。

还记得 render 执行进程中的 diffing 和 reconciliation 阶段吗？前面讲过的对象在这里遇到了。

因此，为了停止不须要的 diffing 开销，我们该当思量将特定的状态值放到更低的层级或组件中（与 React 中所说的「晋升」观念恰恰相反）。在这个例子中，我们可以通过将 count 放到 CounterLabel 组件中打点来办理这个题目。

Tip #2：归并状态更新

由于每次状态更新城市触发新的 render 挪用，那么更少的状态更新也就可以更少的挪用 render 了。

我们知道，React class 组件有 componentDidUpdate(prevProps, prevState) 的钩子，可以用来检测 props 或 state 有没有产生变革。尽量偶然有须要在 props 产生变革时再触发 state 更新，但我们总可以停止在一次 state 变革后再举办一次 state 更新这种操纵：

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: getRange(7),  
    limit: 7  
  };  
  
  handleLimitChange = e => {  
    const limit = e.target.value;  
    const limitChanged = limit !== this.state.limit;  
  
    if (limitChanged) {  
      this.setState({ limit });  
    }  
  };  
  
  componentDidUpdate(prevProps, prevState) {  
    const limitChanged = prevState.limit !== this.state.limit;  
    if (limitChanged) {  
      this.setState({ numbers: getRange(this.state.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);  

这里渲染了一个范畴数字序列，即范畴为 0 到 limit。只要用户改变了 limit 值，我们就会在 componentDidUpdate 中举办检测，并设定新的数字列表。

毫无疑问，上面的代码是可以满意需求的，可是，我们如故可以举办优化。

（编辑：湖南网）

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