react 解决：容器组件更新，导致内容组件重绘

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    list: [1, 2, 3, 4, 5]
  };

  listChange = index => {
    const newList = this.state.list.slice();
    newList[index] = newList[index] + 1;
    this.setState({ list: newList });
  };

  render() {
    return (
      <div>
        {this.state.list.map((str, index) => (
          <Item
            key={index}
            str={str}
            index={index}
            changeHandle={this.listChange}
          />
        ))}
      </div>
    );
  }
}

// 使用Pure提高性能
class Item extends React.PureComponent {
  // class Item extends React.Component {
  // 手动控制是否重绘
  // shouldComponentUpdate(nextProps, nextState) {
  //   if (nextProps.str === this.props.str) {
  //     return false;
  //   }
  //   return true;
  // }
  itemClick = () => {
    this.props.changeHandle(this.props.index);
  };
  render() {
    console.log("i'm render! ");
    return (
      <div
        style={{
          backgroundColor: `#${this.props.str}03121`,
          marginBottom: "5px"
        }}
        onClick={this.itemClick}
      >
        {this.props.str}
      </div>
    );
  }
}


// 容器组件更新，子组件不需要重绘
// Container独立管理状态
// 它看到的子组件(this.props.children)是End传给他的，不需要重新用调用React.createElement创建，所以this.props.children是不变的
class Container extends React.Component {
  state = {
    number: 1
  };
  updata = () => {
    this.setState({ number: this.state.number + 1 });
  };
  render() {
    return (
      <div>
        <p onClick={this.updata}>
          click to updata Container！ {this.state.number}
        </p>
        {this.props.children}
      </div>
    );
  }
}

const End = () => {
  return (
    <Container>
      <App />
    </Container>
  );
};

ReactDOM.render(<End />, document.getElementById("container"));

转载于:https://www.cnblogs.com/hideonbush/p/10820438.html