zoukankan      html  css  js  c++  java
  • 初步学习next.js-5-编写css样式和lazyloading

    CSS

    import React, {useState} from 'react'
    
    function Jspang(){
        //关键代码----------start-------
        const [color,setColor] = useState('blue')
    
        const changeColor=()=>{
    
            setColor(color=='blue'?'red':'blue')
        }
         //关键代码----------end-------
    
        return (
            <>
                <div>技术胖免费前端教程</div>
                <div><button onClick={changeColor}>改变颜色</button></div>
                <style jsx>
                    {`
                        div { color:${color};}
                    `}
                </style>
            </>
        )
    }
    export default Jspang

    懒加载

      懒加载模块

     

    import React, {useState} from 'react'
    //删除import moment
    function Time(){
    
        const [nowTime,setTime] = useState(Date.now())
    
        const changeTime= async ()=>{ //把方法变成异步模式
            const moment = await import('moment') //等待moment加载完成
            setTime(moment.default(Date.now()).format()) //注意使用defalut
        }
        return (
            <>
                <div>显示时间为:{nowTime}</div>
                <div><button onClick={changeTime}>改变时间格式</button></div>
            </>
        )
    }
    export default Time

      懒加载组件

    export default ()=><div>Lazy Loading Component</div>
    import React, {useState} from 'react'
    import dynamic from 'next/dynamic'
    
    const One = dynamic(import('../components/one'))
    
    function Time(){
    
        const [nowTime,setTime] = useState(Date.now())
    
        const changeTime= async ()=>{
            const moment = await import('moment')
    
            setTime(moment.default(Date.now()).format())
        }
        return (
            <>
                <div>显示时间为:{nowTime}</div>
                <One/>
                <div><button onClick={changeTime}>改变时间格式</button></div>
            </>
        )
    }
    export default Time
  • 相关阅读:
    Foundation与Core Foundation内存管理基本原则简述
    Quartz2D 图像处理
    XCode中的特殊快捷键图标
    UITableView的编辑模式
    Cocoa框架中的内存分区
    Cocoa 框架为什么采用两阶段的方式来创建对象?
    IOS中的内存不足警告处理(译)
    Caching和Purgeable Memory (译)
    3年后,我回来了
    POJ3632 Optimal Parking
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13152017.html
Copyright © 2011-2022 走看看