next.js 中的組件
next.js 里面的組件(頁(yè)面)就是 react 里面的組件.
功能組件
在項(xiàng)目之中一個(gè)功能組件的創(chuàng)建 , 他可以和父組件放到一個(gè)文件里,也可以單獨(dú)創(chuàng)建一個(gè)文件存放組件.
- 沒(méi)有生命周期
- 沒(méi)有 this
- 沒(méi)有 state 狀態(tài)
- 一個(gè)函數(shù)就是一個(gè)組件
功能組件一般作為展示類組件使用(輕,快)
import fetch from 'isomorphic-unfetch'
function Page({ stars }) {
return <div>Next stars: {stars}</div>
}
Page.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const json = await res.json()
return { stars: json.stargazers_count }
}
export default Page
類組件
通過(guò) class 和 extends 繼承來(lái)的組件,就是類組件.組件內(nèi)部包含狀態(tài)（state）且狀態(tài)隨著事件或者外部的消息.類組件帶有生命周期(lifecycle),用以在不同的時(shí)刻觸發(fā)狀態(tài)的更新.這種組件一般用來(lái)寫(xiě)業(yè)務(wù)邏輯,根據(jù)不同的業(yè)務(wù)場(chǎng)景組件的狀態(tài)數(shù)量以及生命周期機(jī)制也不盡相同.但是在 next 中由于是服務(wù)端渲染好組件之后發(fā)送給客戶端使用的,所有生命周期實(shí)際上是從 componentDidMount 開(kāi)始的.
下面是一個(gè)類組件
......
import React from 'react'
class HelloUA extends React.Component {
static async getInitialProps({ req }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}
render() {
return <div>Hello World {this.props.userAgent}</div>
}
}
export default HelloUA
getInitialProps
頁(yè)面加載時(shí)加載數(shù)據(jù),我們使用 getInitialProps 這種 async 靜態(tài)方法.它可以異步獲取數(shù)據(jù)并解析為 JavaScript Object 的形式添加到組件的 props 上.getInitialProps 服務(wù)器渲染時(shí),將返回的數(shù)據(jù)進(jìn)行序列化,類似于 JSON.stringify.確保返回的對(duì)象,是一個(gè)普通的 Object.對(duì)于初始頁(yè)面加載,getInitialProps 僅在服務(wù)器上執(zhí)行.getInitialProps 只有 在使用 Link 組件或使用路由 API 導(dǎo)航到其他路由時(shí),才會(huì)在客戶端上執(zhí)行.
簡(jiǎn)單來(lái)說(shuō),初始化的請(qǐng)求一般放在服務(wù)端,頁(yè)面顯示在客戶端之后的請(qǐng)求就放在客戶端
- getInitialProps 不能在子組件使用.僅支持 pages 下的頁(yè)面組件.
- 如果您使用某些僅用于服務(wù)器的模塊 getInitialProps,不正確導(dǎo)入它們就會(huì)降低程序的速度.
- pathname -URL 的路徑部分
- query -URL 的查詢字符串部分(對(duì)象)
- asPath- String 在瀏覽器中顯示的實(shí)際路徑(包括查詢)
- req -HTTP 請(qǐng)求對(duì)象（僅服務(wù)器）
- res -HTTP 響應(yīng)對(duì)象（僅服務(wù)器）
- err -渲染期間遇到任何錯(cuò)誤的錯(cuò)誤對(duì)象
頁(yè)面和動(dòng)態(tài)頁(yè)面
頁(yè)面和動(dòng)態(tài)頁(yè)面就是一個(gè)組件,next 通過(guò)在 pages 下創(chuàng)建 js 文件來(lái)自動(dòng)將組件與路由之間的匹配完成,減少了路由綁定這一步操作.
共享組件
共享組件就是公共組件,可以拿來(lái)復(fù)用的組件.一般我們?cè)?components 文件夾下面創(chuàng)建這類組件,但是這與 pages 不同,并不是強(qiáng)制要求,你可以將你的共享組件在除 pages 之外的任何地方定義.
之前已經(jīng)創(chuàng)建過(guò) Header.js 和 MyLayout.js 兩個(gè)布局,再新建一個(gè) footer.js 組件,同時(shí)新建 components/layout 目錄,將 3 個(gè)布局組件放進(jìn)去
footer.js
export default () => <div className={["footer", "footer-main"]}></div>;
MyLayout.js
import React, { Component } from "react";
import Header from "./Header";
import Footer from "./Footer";
import "../../asserts/css/styles.less";
class Layout extends Component {
render() {
let { children } = this.props;
return (
<div>
<Header />
<div className={"content"}>{children}</div>
<Footer />
</div>
);
}
}
export default Layout;
Header.js
import React, { Component } from "react";
import classnames from "classnames";
import { Menu, Button, Icon, Dropdown } from "antd";
import Link from "next/link";
import Router from "next/router";
const menu = (
<Menu>
<Menu.Item key="0">
<Link href="/">
<div>
<Icon type="user" />
我的主頁(yè)
</div>
</Link>
</Menu.Item>
<Menu.Item key="1">
<Link href="/article">
<div>
<Icon type="user" />
我的專輯
</div>
</Link>
</Menu.Item>
<Menu.Item key="2">
<Link href="/about">
<div>
<Icon type="user" />
我的文章
</div>
</Link>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3">我的收藏</Menu.Item>
<Menu.Item key="4">我的錢(qián)包</Menu.Item>
<Menu.Item key="5">我的啥</Menu.Item>
<Menu.Item key="6">我的啥</Menu.Item>
<Menu.Divider />
<Menu.Item key="7">我的設(shè)置</Menu.Item>
<Menu.Item key="8">退出</Menu.Item>
</Menu>
);
export default class Header extends Component {
constructor(props) {
super(props);
this.state = {
active: "home" //home article collect
};
}
changeActive(active) {
this.setState({
active
});
}
render() {
return (
<div className={"nav nav-main header"}>
<div className={" header-inner"}>
<div className={"header-content"}>
<div className={"header-left"}>
<div className={"logo"}>
<img src="https://www.freelogodesign.org/Content/img/logo-samples/bakary.png" alt="logo"></img>
</div>
</div>
<div className="header-menu">
<div
onClick={() => {
this.changeActive("home");
}}
className={classnames({
"header-menu-item": true,
active: this.state.active === "home"
})}
>
<Link href="/">
<a>首頁(yè)</a>
</Link>
</div>
<div
onClick={() => {
this.changeActive("collect");
}}
className={classnames({
"header-menu-item": true,
active: this.state.active === "collect"
})}
>
<Link href="/article">
<a>專輯</a>
</Link>
</div>
<div
onClick={() => {
this.changeActive("article");
}}
className={classnames({
"header-menu-item": true,
active: this.state.active === "article"
})}
>
<Link href="/article">
<a>文章</a>
</Link>
</div>
</div>
<div className={"header-right"}>
<Dropdown overlay={menu} trigger={["click"]} placement="bottomCenter">
<div className={"avatar"}>
<img
src="https://images.xiaozhuanlan.com/photo/2019/2ad6384db0b94cd8e76d11194400df23.jpeg"
alt="avatar"
></img>
</div>
</Dropdown>
</div>
<div className="header-btn">
<Button type="danger" ghost shape="round" icon="edit" onClick={() => Router.push("/write")}>
寫(xiě)文章>
</Button>
</div>
</div>
</div>
</div>
);
}
}
window(nagivator,localStorage) is not defined
- 將代碼從 componentWillMount()移至 componentDidMount() (但是大多數(shù)問(wèn)題都不是這個(gè))
Next.js 是通用的,這意味著它首先在服務(wù)器端執(zhí)行代碼,然后在客戶端執(zhí)行代碼.window 對(duì)象僅存在于客戶端,因此,如果您需要在某些 React 組件中訪問(wèn)它,則應(yīng)將該代碼放在 componentDidMount 中.此生命周期方法僅在客戶端上執(zhí)行.
- 我一定要在 componentWillMount() 中執(zhí)行
componentWillMount() {
if (typeof window !== 'undefined') {
console.log('window.innerHeight', window.innerHeight);
}
}
- 不使用 ssr
在使用富文本編輯器的時(shí)候出現(xiàn)這個(gè)問(wèn)題,主要報(bào)錯(cuò)是在外部引入庫(kù)中.
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/eidtor'),
{ ssr: false }
)
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
)
}
再次發(fā)布
當(dāng)前機(jī)器已經(jīng)存在 now 工具 , 直接執(zhí)行 now 命令
now
輸入網(wǎng)址,查看效果頁(yè)面效果,需要注意的是 react-next-demo 和之前 next-demo 的區(qū)別,每次執(zhí)行 now 之前需要修改項(xiàng)目名稱,不然會(huì)自動(dòng)覆蓋前一個(gè)靜態(tài)資源網(wǎng)站
