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