pleasestartyourperformance / react-learn Goto Github PK

    function fun(obj){
      return `姓名是${obj.name}`
    }
    let obj= {
      name:'小明'
    };
    let num = 1
    let myDom = (
      <div>
        <div>{fun(obj)}</div>
        <div>{num}</div>
      </div>
    )
    ReactDOM.render(myDom,document.getElementById('app'))

    let arr = [
      <p>123</p>,
      <p>123</p>,
      <p>123</p>,
      <p>123</p>
    ]
    let myDom = (
      <div>
        <div>{arr}</div>
      </div>
    )
    ReactDOM.render(myDom,document.getElementById('app'))

    const obj= {
      name:'小明'
    };
    const domStyle = {
      width: '453px',
      margin: '20px auto',
    }
    const myDom = (
      <div>
        <div style={domStyle} className='myclass' >{obj.name}</div>
      </div>
    )

//单个
    const msg = '123'
    const class1 = 1
    const myDom = (
    <div className={`bubble-box-${class1}`} >
      <div>{msg}</div>
    </div>
    )
//多个
<fieldset className={`${styles.formFieldset} ${styles.formItem}`}>
</fieldset>

const {Provider, Consumer} = React.createContext(defaultValue);

<Provider value={/*共享的数据*/}>
    /*里面可以渲染对应的内容*/
</Provider>

<Consumer>
  {value => /*根据上下文  进行渲染相应内容*/}
</Consumer>

//App.js
import React from 'react';
import Son from './son';//引入子组件
// 创建一个 theme Context,
export const {Provider,Consumer} = React.createContext("默认名称");
export default class App extends React.Component {
    render() {
        let name ="小人头"
        return (
            //Provider共享容器 接收一个name属性
            <Provider value={name}>
                <div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
                    <p>父组件定义的值:{name}</p>
                    <Son />
                </div>
            </Provider>
        );
    }
}

//son.js 子类
import React from 'react';
import { Consumer } from "./App.js";//引入父组件的Consumer容器
import Grandson from "./grandson.js";//引入子组件
function Son(props) {
    return (
        //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {( name ) =>
                <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
                    <p>子组件。获取父组件的值:{name}</p>
                    {/* 孙组件内容 */}
                    <Grandson />
               </div>
            }
        </Consumer>
    );
}
export default Son;

//grandson.js 孙类
import React from 'react';
import { Consumer } from "./App.js";//引入父组件的Consumer容器
function Grandson(props) {
    return (
         //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {(name ) =>
                   <div style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>
                   <p>孙组件。获取传递下来的值:{name}</p>
               </div>
            }
        </Consumer>
    );
}
export default Grandson;

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }
  render() {
    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}
      >
        {this.props.value}
      </button>
    );
  }
}

const routerObserveQueue = [] /* 存放路由卫视钩子 */
/* 懒加载路由卫士钩子 */
export const RouterHooks = {
  /* 路由组件加载之前 */
  beforeRouterComponentLoad: function(callback) {
    routerObserveQueue.push({
      type: 'before',
      callback
    })
  },
  /* 路由组件加载之后 */
  afterRouterComponentDidLoaded(callback) {
    routerObserveQueue.push({
      type: 'after',
      callback
    })
  }
}
/* 路由懒加载HOC */
export default function AsyncRouter(loadRouter) {
  return class Content extends React.Component {
    constructor(props) {
      super(props)
      /* 触发每个路由加载之前钩子函数 */
      this.dispatchRouterQueue('before')
    }
    state = {Component: null}
    dispatchRouterQueue(type) {
      const {history} = this.props
      routerObserveQueue.forEach(item => {
        if (item.type === type) item.callback(history)
      })
    }
    componentDidMount() {
      if (this.state.Component) return
      loadRouter()
        .then(module => module.default)
        .then(Component => this.setState({Component},
          () => {
            /* 触发每个路由加载之后钩子函数 */
            this.dispatchRouterQueue('after')
          }))
    }
    render() {
      const {Component} = this.state
      return Component ? <Component {
      ...this.props
      }
      /> : null
    }
  }
}

import AsyncRouter ,{ RouterHooks }  from './asyncRouter.js'
const { beforeRouterComponentLoad} = RouterHooks
const Index = AsyncRouter(()=>import('../src/page/home/index'))
const List = AsyncRouter(()=>import('../src/page/list'))
const Detail = AsyncRouter(()=>import('../src/page/detail'))
const index = () => {
  useEffect(()=>{
    /* 增加监听函数 */  
    beforeRouterComponentLoad((history)=>{
      console.log('当前激活的路由是',history.location.pathname)
    })
  },[])
  return <div >
    <div >
      <Router  >
      <Meuns/>
      <Switch>
          <Route path={'/index'} component={Index} ></Route>
          <Route path={'/list'} component={List} ></Route>
          <Route path={'/detail'} component={ Detail } ></Route>
          <Redirect from='/*' to='/index' />
       </Switch>
      </Router>
    </div>
  </div>
}

class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

class Home extends Component {
  toAbout=()=>{
    console.log(this.props);
    this.props.history.push('/about')
  }
  render() {
    return (
      <div>
        主页
        <button onClick={this.toAbout}>跳转到关于</button>
      </div>
    )
  }
}
export default withRouter(Home)

/**
 * @file fold
 * @author v_kuiyufeng
 * @owner v_kuiyufeng:2020-06-19
 */
import * as React from 'react'
// import * as PropTypes from 'prop-types'
import { default as c } from 'classnames'
import { CompBaseProps } from '@befe/brick-mobile-utils'
import { useState, useEffect } from 'react'


export interface FoldProps extends CompBaseProps {
    /**
     * 自定义class
     */
    className?: string
    /**
     * 最大高度设置
     */
    maxHeight: number;
    /**
     * 自定义文本默认：展开
     */
    unPackText?: string
    /**
     * 自定义文本默认：收起
     */
    packText?: string
    /**
     * slot
     */
    children: any
}

/**
 * Fold
 * @description one-ui component Fold
 */
export const Fold = (props: FoldProps) => {
    const prefixCls = 'brick-mobile-fold'
    const {
        maxHeight,
        unPackText = '展开',
        packText = '收起',
        children,
        className
    } = props
    const contentRef = React.createRef<HTMLDivElement>()
    const contentWrapperRef = React.createRef<HTMLDivElement>();
    const [contentHeight, setContentHeight] = useState(0);
    const [contentWrapperHeight, setContentWrapperHeight] = useState(0);
    const [showAll, setShowAll] = useState(false);
    useEffect(() => {
        freshHeight();
    })
    const freshHeight = () => {
        const newContentHeignt = contentRef.current.getBoundingClientRect().height;
        const newContentWrapperHeight = contentWrapperRef.current.getBoundingClientRect().height;
        if (newContentHeignt !== contentHeight || newContentWrapperHeight !== contentWrapperHeight) {
            setContentHeight(newContentHeignt)
            setContentWrapperHeight(newContentWrapperHeight)
        }
    }

    const getClassName = () => {
        return c(
            prefixCls,
            className
        )
    }
    const isOverFlow = () => contentHeight > maxHeight;

    const showUnPack = () => {
        return !showAll
            && isOverFlow()
            && contentWrapperHeight < contentHeight;
    }

    const showPack = () => {
        return showAll && contentWrapperHeight > maxHeight;
    }
    
    return (
        <div className={`${getClassName()} comps-ellipsis`}>
            <div
                ref={contentWrapperRef}
                className="comps-content-wrapper"
                style={{ maxHeight: showAll ? undefined : `${maxHeight}px` }}
            >
                <div
                    ref={contentRef}
                    className="comps-content"
                >
                    {children}
                </div>
            </div>
            {
                showUnPack() &&
                <div
                    className="comps-ellipsis-unpack"
                    onClick={() => {
                        setShowAll(true)
                    }}
                >
                    {unPackText}
                </div>
            }
            {
                showPack() &&
                <div
                    onClick={() => {
                        setShowAll(false)
                    }}
                    className="comps-ellipsis-pack"
                >
                    {packText}
                </div>
            }
        </div>
    )
}

import BScroll from 'better-scroll'
//在componentDidMount中
componentDidMount（）{
        const wrapper: HTMLElement | null = document.querySelector('.wrapper')
        this.scroll = wrapper && new BScroll(wrapper, {
            scrollY: true,
            pullUpLoad: {
                threshold: 80,
                stop: 0
            }
        });
}

function repeat(str, count){
    let result = ''
    for(let i = 0; i < count; i++){
        result += str
    }
    return result;
}
console.log(repeat('1', 9999999))

async function repeat(str, count){
    let maxLoopCount = 999999;
    let loopCount = 0;
    
    async function runTask(count) {
        let newStr = ''
        return new Promise((resolve, reject) => {
            window.requestAnimationFrame(() => {
                for (let i = 0; i < count && i < maxLoopCount; i++) {
                    loopCount++
                    newStr += str;
                }
                resolve(newStr);
            });
        });
    }
    
    while (loopCount < count) {
        taskStr += await runTask(count - loopCount);
    }
    return taskStr;
}
repeat('1', 99999999).then(result => console.log(result))

const img = ".bmp, .jpeg, .jpg, .png, .gif";

const fileTypeAccept = ".txt, .doc, .docx, .xlsx, .xls, .pptx, .ppt, .zip, .rar, .pdf, .tar, .mp4, .jpeg, .jpg, .png";

import * as React from 'react';
import './picupload.less';
import { Loading,Message } from '@baidu/one-ui';
//上传按钮的图标
import Addpic from './imgs/addpic.svg'
//重新上传图标
import Upload from './imgs/upload.svg'
//放大的图标
import Zoom from './imgs/zoom.svg'
import {getUpload } from '../api';
interface Props {
    handlePicChange: (
        picUrl: string, 
        picFileid: number, 
        picName: string, 
        picSizeText: string, 
        picSize: number) => void;
    //临时展示的url
    picUrl: string;
    //一个页面多个上传需要唯一id
    uploadId?:string | 'uploadFiles'
}
interface States {
    picInitialUrl: string;
    isPicLoading: boolean;
    isShow: boolean;
    isEnlarge: boolean;
}
export default class PicUpload extends React.PureComponent<Props, States> {
    state = {
        picInitialUrl: '',
        isPicLoading: false,
        isShow: false,
        isEnlarge: false
    }
    //选择文件后会触发
    uploadImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({
            picInitialUrl: ''
        });
        const name = e.target.files![0].name;
        const size = e.target.files![0].size;
        const dValue = size / 1000 / 1024 - 2;
        let sizeText = '';
        if (dValue > 0){
            return Message.warning({
                content: '图片不超过2M'
            })
        }
        if (size < 1024) {
            sizeText = size + 'B';
        }
        else if (size < 1024 * 1024) {
            sizeText = (size / 1024).toFixed(2) + 'KB';
        }
        else {
            sizeText = (size / 1024 / 1024).toFixed(2) + 'MB';
        }
        //加载中
        this.setState({
            isPicLoading: true
        });
        const oFile = e.target.files[0];
        const formData = new FormData();
        formData.append("file", oFile);
        try {
            const res = await getUpload(formData);
            const {url, fileid} = res.data.data;
            this.props.handlePicChange(url, fileid, name, sizeText, size);
            this.setState({
                isPicLoading: false
            });
        } catch (error) {
            if (error.msg) {
                Message.error({
                    content: '上传失败,请重新上传'
                })
                this.setState({
                    isPicLoading: false
                });
            }
        }
    }
    //触发input点击事件
    uploadClick = () =>{
        const {uploadId} =  this.props
        const uploadFile = document.getElementById(uploadId || 'uploadFiles')
        uploadFile?.click();
    }
    render() {
        const { picUrl,uploadId } = this.props;
        const { isShow, isEnlarge } = this.state
        return <div>
            {
                this.state.isPicLoading
                    ? <div className="upload-material-wrapper">
                        <div className="upload-add">
                            <Loading size="large" className="loading-icon" />
                            <div className="add-title">上传中...</div>
                        </div>
                    </div>
                    : !this.props.picUrl
                        ? <div className="upload-material-wrapper">
                            <div className="upload-add" onClick={this.uploadClick}>
                                <img src={Addpic} className="add-img" />
                                <div className="add-title">上传图片</div>
                            </div>
                        </div>
                        : <div
                            className={`upload-material-wrapper uploaded-material-wrapper`}
                            onMouseEnter={() => {
                                this.setState({
                                    isShow: true
                                })
                            }}
                            onMouseLeave={() => {
                                this.setState({
                                    isShow: false
                                })
                            }}
                        >
                            <div className="upload-add add-pic">
                                <img src={picUrl} className="uploaded-pic" />
                            </div>
                            {
                                isShow &&
                                <div className="upload-shadow">
                                    <img
                                        src={Upload}
                                        className='upload-shadow-img'
                                        onClick={this.uploadClick}
                                    />
                                    <img
                                        src={Zoom}
                                        className='upload-shadow-img'
                                        onClick={() => {
                                            this.setState({
                                                isEnlarge: true
                                            })
                                        }}
                                    />
                                </div>
                            }
                        </div>
            }
            {/* 限制文件类型 */}
            <input
                accept=".bmp, .jpeg, .jpg, .png, .gif"
                type="file"
                id={uploadId || 'uploadFiles'}
                className="upload-img"
                onChange={this.uploadImage}
                value={this.state.picInitialUrl}
            />
            {/* 放大模块 */}
            {
                isEnlarge &&
                <div className='enlarge-img-mask'>
                    <div className='img-wrapper'>
                        <img src={picUrl} alt="" />
                        <span
                            className='close-enlarge'
                            onClick={() => {
                                this.setState({
                                    isEnlarge: false
                                })
                            }}>
                        </span>
                    </div>
                </div>
            }
        </div>
    }

};

                <PicUpload
                    handlePicChange={this.handlePicChange()}
                    uploadId='S4XE'
                    picUrl={businessFiles.url}
                />

export const uploadImg = (
    files: FileList,
    option?: AxiosRequestConfig
) => {
    const imgTypes = [
        'bmp',
        'cis-cod',
        'gif',
        'ief',
        'jpeg',
        'pipeg',
        'png',
        'svg',
        '+xml',
        'tiff',
        'x-cmu-raster',
        'x-cmx',
        'x-icon',
        'x-portable-anymap',
        'x-portable-bitmap',
        'x-portable-graymap',
        'x-portable-pixmap',
        'x-rgb',
        'x-xbitmap',
        'x-xpixmap',
        'x-xwindowdump'
    ].map(type => `image/${type}`).join('|');
    const rFilter = new RegExp(`^(?:${imgTypes})$`, 'i');
    if (files.length === 0) {
        Message.error({ content: "请选择文件!"});
        return Promise.reject('请选择文件!');
    }
    const oFile = files[0];
    if (!rFilter.test(oFile.type)) {
        Message.error({ content: "请选择图片!"});
        return Promise.reject('请选择图片!');
    }
    const formData = new FormData();
    formData.append("file", oFile);
    return request.upload<{}, IUpload>('/upload', formData, option);
};

// 上传文件
export const uploadFile = (
    files: FileList,
    option?: AxiosRequestConfig
) => {
    if (files.length === 0) {
        Message.error({ content: "请选择文件!"});
        return Promise.reject('请选择文件!');
    }
    const oFile = files[0];
    const formData = new FormData();
    formData.append("file", oFile);
    return request.upload<{}, IUpload>('/upload', formData, option);
};

export const uploadAudio = (
    files: FileList,
    option?: AxiosRequestConfig
) => {
    const imgTypes = [
        'MP3',
        'mp3',
        'MPEG',
        'mpeg'
    ].map(type => `audio/${type}`).join('|');
    const rFilter = new RegExp(`^(?:${imgTypes})$`, 'i');
    if (files.length === 0) {
        Message.warning({ content: "请上传语音!"});
        return Promise.reject('请上传语音!');
    }
    const oFile = files[0];
    if (!rFilter.test(oFile.type)) {
        Message.warning({ content: "请上传语音!"});
        return Promise.reject('请上传语音!');
    }
    const formData = new FormData();
    formData.append("file", oFile);
    return request.upload<{}, IUpload>('/upload', formData, option);

import React, { useEffect, useLayoutEffect, useRef } from "react";
import TweenMax from "gsap/TweenMax";
import './index.less';

const Animate = () => {
    const REl = useRef(null);
    useEffect(() => {
        /*下面这段代码的意思是当组件加载完成后,在0秒的时间内,将方块的横坐标位置移到600px的位置*/
        TweenMax.to(REl.current, 0, {x: 600})
    }, []);
    return (
        <div className='animate'>
            <div ref={REl} className="square">square</div>
        </div>
    );
};

export default Animate;

export default class TwentyFive extends React.Component {
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: "<span>这是渲染的 HTML 内容</span>" }}></div>
    );
  }
}

import React, { Component } from 'react'
import './xin-swiper.scss'
export default class XinSwiper extends Component {
    constructor(props){
        super(props)
        this.state = {
            list:[
                {
                    name:1
                },
                {
                    name:2
                },
                {
                    name:3
                },
            ],
            current: 1, // 轮播图当前 index
            itemWidth:0, //  图片区域 宽度
            out: 1,  // 堆叠式 外部看到的数量 （左右各相同） 不限制 可以设置 0 或 大于轮播图数量
            offset:90, // 堆叠式 外部偏移量 (产生堆叠效果)
            startTime: 0,
            startX: 0,
            startY: 0,
        }
    }
    componentDidMount(){
        // 获取轮播图片区域宽度
        const width = this.refs.swiperitem.clientWidth
        this.setState({
            itemWidth:width
        })
    }
    // 上一张
    onPrev = (index) => {
        const length = this.state.list.length
        if( index - 1 < 0) {
            this.setState({
                current : length -1
            })
        }else {
            this.setState({
                current : index -1
            })
        }
    }
    // 下一张
    onNext = (index) => {
        const length = this.state.list.length
        if ( index + 1 === length) {
            this.setState({
                current: 0
            })
        }else{
            this.setState({
                current: index + 1
            })
        }
    }
    handelTouchStart = (e) => {
        this.setState({
            startTime:Date.now(),
            startX:e.changedTouches[0].clientX,
            startY:e.changedTouches[0].clientY
        })
    }
    handelTouchend = (e) => {
        const { startX,startY } = this.state
        let endTime = Date.now()
        let endX = e.changedTouches[0].clientX;
        let endY = e.changedTouches[0].clientY;
        if (endTime - this.startTime > 2500) { //正常操作不会大于2.5秒
            return;
        }
        //如果Y轴移动小于10,泽上下滑动
        if (Math.abs(endX - startX) > 10 && Math.abs(endY - startY) < 10) {
            // endX - startX > 0 ? 'right' : 'left'
            let {current} = this.state
            endX - startX > 0 ? this.onPrev(current) : this.onNext(current)
        }
    }

    render() {
        let  {list,current,itemWidth,out,offset} = this.state
        // 水平式   计算轮播区整体位移
        let x = current === 0 ? 0 : - current*itemWidth +'px'
        const translateX = `translateX(${x})`
        return (
            <div className="card-carousels">
                <div className='btn-prev' onClick={ () => this.onPrev(current)}>左按钮</div>
                <div className='btn-next' onClick={ () => this.onNext(current)}>右按钮</div>
                {/*卡片式*/}
                {/*<div className='wrapper'>*/}
                {/*    <div className='inner'>*/}
                {/*        <div ref='swiper' className='swiper' style={{ transform: translateX}}>*/}
                {/*            {*/}
                {/*                list.map( (item,key) =>*/}
                {/*                    (*/}
                {/*                        <div*/}
                {/*                            ref='swiperitem'*/}
                {/*                            className={['swiper-item', key === current ? 'current' : ''].join(" ")} key={key}*/}
                {/*                            onTouchStart={this.handelTouchStart}*/}
                {/*                            onTouchEnd={this.handelTouchend}*/}
                {/*                        >*/}
                {/*                            <div className='pic' >{item.name}</div>*/}
                {/*                        </div>*/}
                {/*                    )*/}
                {/*                )}*/}
                {/*        </div>*/}
                {/*    </div>*/}
                {/*</div>*/}

                <div className='wrapper'>
                    <div className='inner'>
                        <div className='swiper2'>
                            {
                                list.map((item , index ) => {
                                    // 层叠式 计算各张图片 translateX scale  z-index 产生堆叠效果
                                    let transform = 'none'
                                    let zIndex = 0
                                    let opacity = 1
                                    // if(out ? index < current && current - index <= out : index < current){
                                    //     // 左边 堆叠
                                    //     zIndex = index +1
                                    //     transform = `translateX(${(index - current)*offset}px) scale(${1-(current-index)*0.1})`
                                    // }else if(out ?  index > current && index - current <= out : index> current){
                                    //     // 右边 堆叠
                                    //     zIndex = list.length - index
                                    //     transform = `translateX(${(index - current)*offset}px) scale(${1-(index-current)*0.1})`
                                    // }else if (index === current){
                                    //     // 当前图片
                                    //     zIndex = list.length
                                    // }
                                    if(current === 0 && list.length -1 === index ){
                                        transform = `translateX(${0-offset}px) scale(0.9)`
                                        opacity = 0.5
                                    } else if(current === list.length -1 && index === 0 ){
                                        transform = `translateX(${offset}px) scale(0.9)`
                                        opacity = 0.5
                                    } else if(index === current - 1){
                                        // 左边 堆叠
                                        zIndex = index +1
                                        transform = `translateX(${0-offset}px) scale(0.9)`
                                        opacity = 0.5
                                    }else if(index === current + 1){
                                        // 右边 堆叠
                                        zIndex = list.length - index
                                        transform = `translateX(${offset}px) scale(0.9)`
                                        opacity = 0.5
                                    }else if (index === current){
                                        // 当前图片
                                        zIndex = list.length
                                    }
                                    return (
                                        <div
                                            className='swiper-item'
                                            key={index} style={{transform,zIndex,opacity}}
                                            onTouchStart={this.handelTouchStart}
                                            onTouchEnd={this.handelTouchend}
                                        >
                                            {item.name}
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

class Index extends React.Component<any,any>{
    state={
       list: []
    }
    handerClick=()=>{
       let starTime = new Date().getTime()
       this.setState({
           list: new Array(40000).fill(0)
       },()=>{
          const end =  new Date().getTime()
          console.log( (end - starTime ) / 1000 + '秒')
       })
    }
    render(){
        const { list } = this.state
        console.log(list)
        return <div>
            <button onClick={ this.handerClick } >点击</button>
            {
                list.map((item,index)=><li className="list"  key={index} >
                    { item  + '' + index } Item
                </li>)
            }
        </div>
    }
}

class Index extends React.Component<any,any>{
    state={
       list: []
    }
    handerClick=()=>{
       this.sliceTime(new Array(40000).fill(0), 0)
    }
    sliceTime=(list,times)=>{
        if(times === 400) return 
        setTimeout(() => {
            const newList = list.slice( times , (times + 1) * 100 ) /* 每次截取 100 个 */
            this.setState({
                list: this.state.list.concat(newList)
            })
            this.sliceTime( list ,times + 1 )
        }, 0)
    }
    render(){
        const { list } = this.state
        return <div>
            <button onClick={ this.handerClick } >点击</button>
            {
                list.map((item,index)=><li className="list"  key={index} >
                    { item  + '' + index } Item
                </li>)
            }
        </div>
    }
}

import React from 'react';
import {render} from 'react-dom';
import VirtualList from 'react-tiny-virtual-list';
 
const data = ['A', 'B', 'C', 'D', 'E', 'F', ...];
 
render(
  <VirtualList
    width='100%'
    height={600}
    itemCount={data.length}
    itemSize={50} // Also supports variable heights (array or function getter)
    renderItem={({index, style}) =>
      <div key={index} style={style}> // The style property contains the item's absolute position
        Letter: {data[index]}, Row: #{index}
      </div>
    }
  />,
  document.getElementById('root')
);

let num  = 0
class Index extends React.Component<any, any>{
    state = {
        list: new Array(9999).fill(0).map(() =>{ 
            num++
            return num
        }),
        scorllBoxHeight: 500, /* 容器高度(初始化高度) */
        renderList: [],       /* 渲染列表 */
        itemHeight: 60,       /* 每一个列表高度 */
        bufferCount: 8,       /* 缓冲个数 上下四个 */
        renderCount: 0,       /* 渲染数量 */
        start: 0,             /* 起始索引 */
        end: 0                /* 终止索引 */
    }
    listBox: any = null
    scrollBox : any = null
    scrollContent:any = null
    componentDidMount() {
        const { itemHeight, bufferCount } = this.state
        /* 计算容器高度 */
        const scorllBoxHeight = this.listBox.offsetHeight
        const renderCount = Math.ceil(scorllBoxHeight / itemHeight) + bufferCount
        const end = renderCount + 1
        this.setState({
            scorllBoxHeight,
            end,
            renderCount,
        })
    }
    /* 处理滚动效果 */
    handerScroll=()=>{
        const { scrollTop } :any =  this.scrollBox
        const { itemHeight , renderCount } = this.state
        const currentOffset = scrollTop - (scrollTop % itemHeight)
        /* translate3d 开启css cpu 加速 */
        this.scrollContent.style.transform = `translate3d(0, ${currentOffset}px, 0)`
        const start = Math.floor(scrollTop / itemHeight)
        const end = Math.floor(scrollTop / itemHeight + renderCount + 1)
        this.setState({
            start,
            end,
       })
    }
     /* 性能优化：只有在列表start 和 end 改变的时候在渲染列表 */
    shouldComponentUpdate(_nextProps, _nextState){
        const { start , end } = _nextState
        return start !== this.state.start || end !==this.state.end 
    }
    /* 处理滚动效果 */
    render() {
        console.log(1111)
        const { list, scorllBoxHeight, itemHeight ,start ,end } = this.state
        const renderList = list.slice(start,end)
        return <div className="list_box"
            ref={(node) => this.listBox = node}
        >   
            <div  
               style={{ height: scorllBoxHeight, overflow: 'scroll', position: 'relative' }}  
               ref={ (node)=> this.scrollBox = node }
               onScroll={ this.handerScroll }   
            >
                { /* 占位作用 */}
                <div style={{ height: `${list.length * itemHeight}px`, position: 'absolute', left: 0, top: 0, right: 0 }} />
                { /* 显然区 */ }
                <div ref={(node) => this.scrollContent = node} style={{ position: 'relative', left: 0, top: 0, right: 0 }} >
                    {
                        renderList.map((item, index) => (
                            <div className="list" key={index} >
                                {item + '' } Item
                            </div>
                        ))
                    }
                </div>
            </div>

        </div>
    }
}

import LinesEllipsis from 'react-lines-ellipsis';

<LinesEllipsis
  text='long long text'
  maxLine='3'
  ellipsis='...'
  trimRight
  basedOn='letters'
/>

<div className="testDom" onClick={this.testDomClick()}><div>

class Test extends Component {
    constructor() {
        super(arguments);
        this.onReactClick.bind(this);
    }
    componentDidMount() {
        const parentDom = ReactDOM.findDOMNode(this);
        const childrenDom = parentDom.queneSelector(".button");
        childrenDom .addEventListen('click', this.onDomClick, false);
    }
    onDomClick() {  // 事件委托
        console.log('Javascript Dom click');
    }
    onReactClick() {  // react合成事件
        console.log('React click');
    }
    render() {
        <div>
            <button className="button" onClick={this.onReactClick()}>点击</button>
        </div>
    }
}

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Demo1 extends Component {
    render() {
        return (
            <input />
        )
    }
}

ReactDOM.render(<Demo1/>, document.getElementById('content'))

class Demo1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value
        }
    }

    handleChange(e) {
        this.setState({
            value: e.target.value
        })
    }

    render() {
        return (
            <input value={this.state.value} onChange={e => this.handleChange(e)}/>
        )
    }
}

<div id="root"> SVG </div>

export default class Thirty extends React.Component {
  click = e => {
    console.log(e.target.getAttribute("data-row"));
  };

  render() {
    return (
      <div>
        <div data-row={"属性1"} data-col={"属性 2"} onClick={this.click}>
          点击获取属性
        </div>
      </div>
    );
  }
}

function visible(WrappedComponent) {
  return class extends Component {
    render() {
      const { visible, ...props } = this.props;
      if (visible === false) return null;
      return <WrappedComponent {...props} />;
    }
  }
}

import { observable, computed } from "mobx";

class Srore {

 @observable time = '2020'
//和vue一样根据依赖项变化则会变化
 computed get msg(){
   return `当前时间是${this.time}`
 }
//通过action修改属性相当于vue中的mution
 action setTime(){
   this.time = '2020'
 }
}
const store = new Srore()
export default store

this.state.message =”Hello world”;

this.setState({message: ‘Hello World’});