Next框架基础
白修谨
老规矩：脚手架快速搭建基本环境。很多都是重复的，所以省了很多代码。
路径跳转两种方式：
1.link标签式跳转。
2.Router跳转，可把方法分离出来。
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {
function gotoA(){
Router.push('/jspangA')
}
return(
<>
<div>我是首页</div>
<div>
<Link href="/jspangA">
<a>
<span>去JspangA页面</span>
<span>前端博客</span>
</a>
</Link>
</div>
<div><Link href="/jspangB"><a>去JspangB页面</a></Link></div>
<div>
<button onClick={gotoA}>去JspangA页面</button>
</div>
</>
)
}
export default Home
传递参数通过query（？id=1），通过router.query.属性名，通过以下代码展示：
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {
return(
<>
<div>我是首页</div>
<div>
<Link href="/xiaojiejie?name=波多野结衣"><a>选波多野结衣</a></Link><br/>
<Link href="/xiaojiejie?name=苍井空"><a>选苍井空</a></Link>
</div>
</>
)
}
export default Home
import { withRouter} from 'next/router'
import Link from 'next/link'
const Xiaojiejie = ({router})=>{
return (
<>
<div>{router.query.name},来为我们服务了 .</div>
<Link href="/"><a>返回首页</a></Link>
</>
)
}
export default withRouter(Xiaojiejie)
withRouter是高级组件，以上是link标签式跳转，以下是编程式跳转，看代码：
<div>
<button onClick={gotoXiaojiejie}>选井空</button>
</div>
function gotoXiaojiejie(){
Router.push({
pathname:'/xiaojiejie',
query:{
name:'井空'
}
})
}
方法用对象的形式来写，显得高大上。
1.routeChangeStart：路由发生变化时
2.routeChangeComplete：路由结束变化时
3.beforeHistoryChange：浏览器history触发前
4.routeChangeError：路由跳转发生错误时，注意404找不到页面不算错误
还有两件事件针对hash。
5.hashChangeStart：哈希跳转开始时执行
6.hashChangeComplete：哈希跳转完成时
以下使用哈希跳转：
<div>
<Link href="#jspang"><a>选JSPang</a></Link>
</div>
给出全部代码：
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {
function gotoXiaojiejie(){
Router.push({
pathname:'/xiaojiejie',
query:{
name:'井空'
}
})
}
Router.events.on('routeChangeStart',(...args)=>{
console.log('1.routeChangeStart->路由开始变化,参数为:',...args)
})
Router.events.on('routeChangeComplete',(...args)=>{
console.log('2.routeChangeComplete->路由结束变化,参数为:',...args)
})
Router.events.on('beforeHistoryChange',(...args)=>{
console.log('3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:',...args)
})
Router.events.on('routeChangeError',(...args)=>{
console.log('4,routeChangeError->跳转发生错误,参数为:',...args)
})
Router.events.on('hashChangeStart',(...args)=>{
console.log('5,hashChangeStart->hash跳转开始时执行,参数为:',...args)
})
Router.events.on('hashChangeComplete',(...args)=>{
console.log('6,hashChangeComplete->hash跳转完成时,参数为:',...args)
})
return(
<>
<div>我是首页</div>
<div>
<Link href={{pathname:'/xiaojiejie',query:{name:'结衣'}}}><a>选结衣</a></Link><br/>
<Link href="/xiaojiejie?name=井空"><a>选井空</a></Link>
</div>
<div>
<button onClick={gotoXiaojiejie}>选井空</button>
</div>
<div>
<Link href="#jspang"><a>选JSPang</a></Link>
</div>
</>
)
}
export default Home
这个框架约定用静态方法getInitialProps（）获取远程数据，虽然可以在ComponentDidMount这个钩子函数里获取数据，但用了别人的框架，就要遵守别人的约定。安装axios
import { withRouter} from 'next/router'
import Link from 'next/link'
import axios from 'axios'
const Xiaojiejie = ({router,list})=>{
return (
<>
<div>{router.query.name},来为我们服务了 .<br/>{list}</div>
<Link href="/"><a>返回首页</a></Link>
</>
)
}
Xiaojiejie.getInitialProps = async ()=>{
const promise =new Promise((resolve)=>{
axios('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList').then(
(res)=>{
console.log('远程数据结果：',res)
resolve(res.data.data)
}
)
})
return await promise
}
export default withRouter(Xiaojiejie)
这个框架使用css样式的话，需要做额外的配置，因为框架为我们提供了style jsx 特性，把css用jsx语法写出来，和Vue挺像，这样：大括号包含
<style jsx>
{`
div{color:blue;}
`}
</style>
以下功能实现，给字体切换颜色：
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
lazy loading 懒加载（异步加载）：当我们作的应用存在首页打开过慢和某个页面加载过慢时，就可以采用Lazy Loading的形式，用懒加载解决这些问题。
yarn add momnet
日期处理类库，用它来处理时间，举个例子：
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
组件也是相当简单：引入dynamic，用到时才会加载
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
自定义Head——更加友好的SEO操作,这样：
import Head from 'next/head'
function Header(){
return (
<>
<Head>
<title>技术胖是最胖的！</title>
<meta charSet='utf-8' />
</Head>
<div>JSPang.com</div>
</>
)
}
export default Header
Next默认是不支持css的，所以要改下配置：
yarn add @zeit/next-css
建立一个next.config.js总配置文件
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
require.extensions['.css']=file=>{}
}
module.exports = withCss({})
按需加载Antd：
yarn add antd
yarn add babel-plugin-import
在根目录下，新建babelrc文件，写入以下：
{
"presets":["next/babel"], //Next.js的总配置文件，相当于继承了它本身的所有配置
"plugins":[ //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
[
"import",
{
"libraryName":"antd",
"style":"css"
}
]
]
}
Next生产环境打包：
1.到package.json里配置：
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 80"
},
2.page目录下新建_app.js文件：
import App from 'next/app'
import 'antd/dist/antd.css'
export default App
next的一些基础，目前是先简单了解下。
类似资料：