zoukankan      html  css  js  c++  java
  • 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"));
    
    
  • 相关阅读:
    cocos2d-x之Menu菜单选项按钮简介
    cocos2d-x中的内存管理机制
    cocos2d-x之TableView列表
    cocos2d-x之逐帧动画
    Cocos2d-x之CallFunc动作的侦听
    Cocos2d-x之Sequence动作序列执行
    Cocos2d-x之的动作混合
    Cocos2d-x之的动作的重复
    Python 生成器
    函数
  • 原文地址:https://www.cnblogs.com/hideonbush/p/10820438.html
Copyright © 2011-2022 走看看