next.js 中的組件
next.js 里面的組件(頁面)就是 react 里面的組件.
功能組件
在項目之中一個功能組件的創建 , 他可以和父組件放到一個文件里,也可以單獨創建一個文件存放組件.
- 沒有生命周期
- 沒有 this
- 沒有 state 狀態
- 一個函數就是一個組件
功能組件一般作為展示類組件使用(輕,快)
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
類組件
通過 class 和 extends 繼承來的組件,就是類組件.組件內部包含狀態（state）且狀態隨着事件或者外部的消息.類組件帶有生命周期(lifecycle),用以在不同的時刻觸發狀態的更新.這種組件一般用來寫業務邏輯,根據不同的業務場景組件的狀態數量以及生命周期機制也不盡相同.但是在 next 中由於是服務端渲染好組件之后發送給客戶端使用的,所有生命周期實際上是從 componentDidMount 開始的.
下面是一個類組件
......
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
頁面加載時加載數據,我們使用 getInitialProps 這種 async 靜態方法.它可以異步獲取數據並解析為 JavaScript Object 的形式添加到組件的 props 上.getInitialProps 服務器渲染時,將返回的數據進行序列化,類似於 JSON.stringify.確保返回的對象,是一個普通的 Object.對於初始頁面加載,getInitialProps 僅在服務器上執行.getInitialProps 只有 在使用 Link 組件或使用路由 API 導航到其他路由時,才會在客戶端上執行.
簡單來說,初始化的請求一般放在服務端,頁面顯示在客戶端之后的請求就放在客戶端
- getInitialProps 不能在子組件使用.僅支持 pages 下的頁面組件.
- 如果您使用某些僅用於服務器的模塊 getInitialProps,不正確導入它們就會降低程序的速度.
- pathname -URL 的路徑部分
- query -URL 的查詢字符串部分(對象)
- asPath- String 在瀏覽器中顯示的實際路徑(包括查詢)
- req -HTTP 請求對象（僅服務器）
- res -HTTP 響應對象（僅服務器）
- err -渲染期間遇到任何錯誤的錯誤對象
頁面和動態頁面
頁面和動態頁面就是一個組件,next 通過在 pages 下創建 js 文件來自動將組件與路由之間的匹配完成,減少了路由綁定這一步操作.
共享組件
共享組件就是公共組件,可以拿來復用的組件.一般我們在 components 文件夾下面創建這類組件,但是這與 pages 不同,並不是強制要求,你可以將你的共享組件在除 pages 之外的任何地方定義.
之前已經創建過 Header.js 和 MyLayout.js 兩個布局,再新建一個 footer.js 組件,同時新建 components/layout 目錄,將 3 個布局組件放進去
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" />
我的主頁
</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">我的錢包</Menu.Item>
<Menu.Item key="5">我的啥</Menu.Item>
<Menu.Item key="6">我的啥</Menu.Item>
<Menu.Divider />
<Menu.Item key="7">我的設置</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>首頁</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")}>
寫文章>
</Button>
</div>
</div>
</div>
</div>
);
}
}
window(nagivator,localStorage) is not defined
- 將代碼從 componentWillMount()移至 componentDidMount() (但是大多數問題都不是這個)
Next.js 是通用的,這意味着它首先在服務器端執行代碼,然后在客戶端執行代碼.window 對象僅存在於客戶端,因此,如果您需要在某些 React 組件中訪問它,則應將該代碼放在 componentDidMount 中.此生命周期方法僅在客戶端上執行.
- 我一定要在 componentWillMount() 中執行
componentWillMount() {
if (typeof window !== 'undefined') {
console.log('window.innerHeight', window.innerHeight);
}
}
- 不使用 ssr
在使用富文本編輯器的時候出現這個問題,主要報錯是在外部引入庫中.
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/eidtor'),
{ ssr: false }
)
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
)
}
再次發布
當前機器已經存在 now 工具 , 直接執行 now 命令
now
輸入網址,查看效果頁面效果,需要注意的是 react-next-demo 和之前 next-demo 的區別,每次執行 now 之前需要修改項目名稱,不然會自動覆蓋前一個靜態資源網站