加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-bits:shouldComponentUpdate() check

发布时间:2020-12-15 07:23:37 所属栏目:百科 来源:网络整理
导读:使用shouldComponentUpdate避免昂贵的重复渲染 react组件的props和state改变时会触发重复渲染,每次改变重新渲染整个页面会对浏览器造成很大负担。render之前会触发shouldComponentUpdate,手动判断props和state是否改变,并返回true或false,返回false不会

使用shouldComponentUpdate避免昂贵的重复渲染
react组件的props和state改变时会触发重复渲染,每次改变重新渲染整个页面会对浏览器造成很大负担。render之前会触发shouldComponentUpdate,手动判断props和state是否改变,并返回true或false,返回false不会触发渲染。

bad

const AutocompleteItem = (props) => {
  const selectedClass = props.selected === true ? "selected" : "";
  var path = parseUri(props.url).path;
  path = path.length <= 0 ? props.url : "..." + path;

  return (
    <li
      onMouseLeave={props.onMouseLeave}
      className={selectedClass}>
      <i className="ion-ios-eye"
         data-image={props.image}
         data-url={props.url}
         data-title={props.title}
         onClick={props.handlePlanetViewClick}/>
      <span
        onMouseEnter={props.onMouseEnter}
      >
        <div className="dot bg-mint"/>
        {path}
      </span>
    </li>
  );
};

good

export default class AutocompleteItem extends React.Component {
  shouldComponentUpdate(nextProps,nextState) {
    if (
      nextProps.url !== this.props.url ||
      nextProps.selected !== this.props.selected
    ) {
      return true;
    }
    return false;
  }

  render() {
    const {props} = this;
    const selectedClass = props.selected === true ? "selected" : "";
    var path = parseUri(props.url).path;
    path = path.length <= 0 ? props.url : "..." + path;

    return (
      <li
        onMouseLeave={props.onMouseLeave}
        className={selectedClass}>
        <i className="ion-ios-eye"
           data-image={props.image}
           data-url={props.url}
           data-title={props.title}
           onClick={props.handlePlanetViewClick}/>
        <span
          onMouseEnter={props.onMouseEnter}>
          <div className="dot bg-mint"/>
          {path}
        </span>
      </li>
    );
  }
}

(编辑:李大同)

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

    推荐文章
      热点阅读