前端性能优化实践之 SVG Flex 预加载 窗口加载（7）

1、网页搜索 iconfont 常规使用 ali 不过这个不用登陆 https://icofont.com/icons
  2、下载下来 并且使用 
  3、
复制代码

1、display: flex 作为父级容器
2、子容器也可 使用 display:flex 作为下一级的 父级容器
3、常规 用在移动端和小程序，并且 非常容易实现水平 垂直居中效果 
4、可以 进行不同尺寸的自适应布局  非常的强大和nice 
复制代码

<header class="header">Header</header>
      <article class="main">
        <p>
          djajdjanndadmamdma dajdadnadnandamd djajdjanndadmamdma
          dajdadnadnandamd djajdjanndadmamdma dajdadnadnandamd
          djajdjanndadmamdma dajdadnadnandamd
        </p>
      </article>
      <aside class="aside nav">nav</aside>
      <aside class="aside ads">ads</aside>
      <footer class="footer">Footer</footer>
    </div>
复制代码

.wrapper {
        display: flex;
        flex-flow: row wrap;
        text-align: center;
      }
      .wrapper > * {
        padding: 10px;
        flex: 1 100%;
      }
      .main {
        background-color: slateblue;
      }
      .header {
        background-color: skyblue;
      }
      .nav {
        background-color: pink;
      }
      .ads {
        background-color: yellow;
      }
      .footer {
        background-color: lavender;
      }
      @media all and (min-width: 700px) {
        .aside {
          flex: 1 0 0;
        }
      }
      @media all and (min-width: 800px) {
        .main {
          flex: 3 0 0;
          order: 2;
        }
        .nav {
          order: 1;
        }
        .ads {
          order: 3;
        }
        .footer {
          order: 4;
        }
      }
复制代码

1、安装  yarn add --dev react-snap
  2、配置一下 
复制代码

1、安装插件 npm i - D react-window 
 2、写一个 ListComponent 做一个窗口显示 部分 list 
 3、在 About 组件内 使用 ListComponent 组件
 4、查看页面效果 
复制代码

import { FixedSizeList } from "react-window";
import model from "../model";
// 定义 item
const items = [];
for (let i = 0; i < 100; i++) {
  items.push(
    model.map((item, index) => (
      <img
        src={item.image}
        alt={item.name}
        key={index}
        width={100}
        height={90}
      />
    ))
  );
}
const Content = ({ index, style }) => {
  // 扩展样式
  let styleExtend = {
    ...style,
    borderBottom: "1px solid #fff",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };
  return <div style={styleExtend}>{items[index]}</div>;
};
const ListComponent = (props) => (
  // 固定长度的list 非固定还有另外一种
  <FixedSizeList
    width={400}
    height={360}
    itemSize={120}
    itemCount={100}
    className={props.className}
  >
    {Content}
  </FixedSizeList>
);
export default ListComponent;
复制代码

import SolidSvg from "../img/icon/address-card-solid.svg";
import ListComponent from "./components/ListComponent";
import { withStyles } from "@material-ui/core/styles";
const styles = () => ({
  listContainer: {
    backgroundColor: "#353740",
    border: "2px solid #bcbcbc",
    borderRadius: "20px",
  },
});
class About extends Component {
  render() {
    return (
      <div>
        {/* <SolidSvg width={100} color={"#f3f3f3"} /> */}
        <ListComponent className={this.props.classes.listContainer} />
      </div>
    );
  }
}
export default withStyles(styles)(About);
复制代码

1、定义一个 Cell 定位行列
 2、使用 这个 Cell 
 3、查看 滚动效果 
复制代码

1、改写成 class 组件因为要使用 React.createRef()
2、取一个位置 
3、点击click 到这个位置
4、页面效果 
复制代码

1、安装 npm install -d react-placeholder
2、复制 一份 Cart组件 到 Contact 并做一些删减 
3、简单使用方法 直接 用官网的例子进行改动 
4、查看 页面效果 对比
复制代码

import MaterialUICard from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";
import "./animation.css";
import CardMedia from "@material-ui/core/CardMedia";
import { LazyLoadImage } from "react-lazy-load-image-component";
import ReactPlaceholder from "react-placeholder/lib";
import {
  TextBlock,
  MediaBlock,
  TextRow,
  RectShape,
  RoundShape,
} from "react-placeholder/lib/placeholders";
const awesomePlaceholder = (
  <div className="my-awesome-placeholder">
    <RectShape
      color="#aaa"
      style={{
        width: 300,
        height: 200,
        marginTop: "20px",
        marginBottom: "20px",
      }}
    />
    <TextBlock rows={2} color="#aaa" style={{ width: 300, height: "1rem" }} />
  </div>
);
const styles = (theme) => ({
  root: {
    margin: theme.spacing(1),
    willChange: "transform",
    width: 300,
  },
  card: {
    width: 300,
    height: 300,
  },
  cardSpinning: {
    width: 300,
    animation: "3s linear 1s infinite running rotate",
  },
  media: {
    height: 200,
    width: 300,
    objectFit: "cover",
    backgroundColor: "#aaa",
    animation: "react-placeholder-pulse 1.5s infinite",
  },
});
class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ready: false,
    };
  }
  becomeReady = () => {
    setTimeout(() => {
      this.setState({
        ready: true,
      });
    }, 2000);
  };
  render() {
    return (
      <div className={this.props.classes.root}>
        {/*添加点击事件，触发动画*/}
        <ReactPlaceholder
          ready={this.state.ready}
          customPlaceholder={awesomePlaceholder}
        >
          <MaterialUICard onClick={this.handleClick}>
            <CardMedia
              component="img"
              className={this.props.classes.media}
              image={this.props.image}
              height="200"
              onLoad={this.becomeReady()}
            />
            <CardContent>
              <Typography gutterBottom variant="h6" component="h2">
                {this.props.description}
              </Typography>
              <Typography component="p">{this.props.description}</Typography>
            </CardContent>
          </MaterialUICard>
        </ReactPlaceholder>
      </div>
    );
  }
}
export default withStyles(styles)(Contact);
复制代码