next.js 中的组件
next.js 里面的组件(页面)就是 react 里面的组件.
功能组件
在项目之中一个功能组件的创建 , 他可以和父组件放到一个文件里,也可以单独创建一个文件存放组件.
- 没有生命周期
- 没有 this
- 没有 state 状态
- 一个函数就是一个组件
功能组件一般作为展示类组件使用(轻,快)
import fetch from 'isomorphic-unfetch'
function Page({ stars }) {
return Next stars: {stars}
}
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 Hello World {this.props.userAgent}
}
}
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 () => ;
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 (
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 = (
);
export default class Header extends Component {
constructor(props) {
super(props);
this.state = {
active: "home" //home article collect
};
}
changeActive(active) {
this.setState({
active
});
}
render() {
return (
{
this.changeActive("home");
}}
className={classnames({
"header-menu-item": true,
active: this.state.active === "home"
})}
>
首页
{
this.changeActive("collect");
}}
className={classnames({
"header-menu-item": true,
active: this.state.active === "collect"
})}
>
专辑
{
this.changeActive("article");
}}
className={classnames({
"header-menu-item": true,
active: this.state.active === "article"
})}
>
文章
);
}
}
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 (
HOME PAGE is here!
)
}
- Window is not defined in NextJS React app?
- with-no-ssr
再次发布
当前机器已经存在 now 工具 , 直接执行 now 命令
now
输入网址,查看效果页面效果,需要注意的是 react-next-demo 和之前 next-demo 的区别,每次执行 now 之前需要修改项目名称,不然会自动覆盖前一个静态资源网站
Doc
- 官方 demo
- 获取数据和组件生命周期