[Next] 二.next.js之组件

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 之前需要修改项目名称,不然会自动覆盖前一个静态资源网站