[Next] 二.next.js之组件
<h2 id="nextjs-中的组件">next.js 中的组件</h2><p>next.js 里面的组件(页面)就是 react 里面的组件.</p>
<h4 id="功能组件">功能组件</h4>
<p>在项目之中一个功能组件的创建 , 他可以和父组件放到一个文件里,也可以单独创建一个文件存放组件.</p>
<ul>
<li>没有生命周期</li>
<li>没有 this</li>
<li>没有 state 状态</li>
<li>一个函数就是一个组件</li>
</ul>
<p>功能组件一般作为展示类组件使用(轻,快)</p>
<pre><code>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
</code></pre>
<h4 id="类组件">类组件</h4>
<p>通过 class 和 extends 继承来的组件,就是类组件.组件内部包含状态（state）且状态随着事件或者外部的消息.类组件带有生命周期(lifecycle),用以在不同的时刻触发状态的更新.这种组件一般用来写业务逻辑,根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同.但是在 next 中由于是服务端渲染好组件之后发送给客户端使用的,所有生命周期实际上是从 componentDidMount 开始的.</p>
<p>下面是一个类组件</p>
<pre><code>......
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
</code></pre>
<h4 id="getinitialprops">getInitialProps</h4>
<p>页面加载时加载数据,我们使用 getInitialProps 这种 async 静态方法.它可以异步获取数据并解析为 JavaScript Object 的形式添加到组件的 props 上.getInitialProps 服务器渲染时,将返回的数据进行序列化,类似于 JSON.stringify.确保返回的对象,是一个普通的 Object.对于初始页面加载,getInitialProps 仅在服务器上执行.getInitialProps 只有 在使用 Link 组件或使用路由 API 导航到其他路由时,才会在客户端上执行.</p>
<p>简单来说,初始化的请求一般放在服务端,页面显示在客户端之后的请求就放在客户端</p>
<ul>
<li>getInitialProps 不能在子组件使用.仅支持 pages 下的页面组件.</li>
<li>如果您使用某些仅用于服务器的模块 getInitialProps,不正确导入它们就会降低程序的速度.</li>
</ul>
<blockquote>
<ul>
<li>pathname -URL 的路径部分</li>
<li>query -URL 的查询字符串部分(对象)</li>
<li>asPath- String 在浏览器中显示的实际路径(包括查询)</li>
<li>req -HTTP 请求对象（仅服务器）</li>
<li>res -HTTP 响应对象（仅服务器）</li>
<li>err -渲染期间遇到任何错误的错误对象</li>
</ul>
</blockquote>
<h4 id="页面和动态页面">页面和动态页面</h4>
<p>页面和动态页面就是一个组件,next 通过在 pages 下创建 js 文件来自动将组件与路由之间的匹配完成,减少了路由绑定这一步操作.</p>
<h4 id="共享组件">共享组件</h4>
<p>共享组件就是公共组件,可以拿来复用的组件.一般我们在 components 文件夹下面创建这类组件,但是这与 pages 不同,并不是强制要求,你可以将你的共享组件在除 pages 之外的任何地方定义.</p>
<p>之前已经创建过 Header.js 和 MyLayout.js 两个布局,再新建一个 footer.js 组件,同时新建 components/layout 目录,将 3 个布局组件放进去</p>
<p>footer.js</p>
<pre><code>export default () => <div className={["footer", "footer-main"]}></div>;
</code></pre>
<p>MyLayout.js</p>
<pre><code>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;
</code></pre>
<p>Header.js</p>
<pre><code>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>
);
}
}
</code></pre>
<h4 id="windownagivatorlocalstorage-is-not-defined">window(nagivator,localStorage) is not defined</h4>
<ol>
<li>将代码从 componentWillMount()移至 componentDidMount() (但是大多数问题都不是这个)</li>
</ol>
<p>Next.js 是通用的,这意味着它首先在服务器端执行代码,然后在客户端执行代码.window 对象仅存在于客户端,因此,如果您需要在某些 React 组件中访问它,则应将该代码放在 componentDidMount 中.此生命周期方法仅在客户端上执行.</p>
<ol start="2">
<li>我一定要在 componentWillMount() 中执行</li>
</ol>
<pre><code>componentWillMount() {
if (typeof window !== 'undefined') {
console.log('window.innerHeight', window.innerHeight);
}
}
</code></pre>
<ol start="3">
<li>不使用 ssr</li>
</ol>
<p>在使用富文本编辑器的时候出现这个问题,主要报错是在外部引入库中.</p>
<pre><code>const DynamicComponentWithNoSSR = dynamic(
() => import('../components/eidtor'),
{ ssr: false }
)
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
)
}
</code></pre>
<ul>
<li>Window is not defined in NextJS React app?</li>
<li>with-no-ssr</li>
</ul>
<h2 id="再次发布">再次发布</h2>
<p>当前机器已经存在 now 工具 , 直接执行 now 命令</p>
<pre><code>now
</code></pre>
<p>输入网址,查看效果页面效果,需要注意的是 react-next-demo 和之前 next-demo 的区别,每次执行 now 之前需要修改项目名称,不然会自动覆盖前一个静态资源网站</p>
<h2 id="doc">Doc</h2>
<ul>
<li>官方 demo</li>
<li>获取数据和组件生命周期</li>
</ul><br><br>
来源：https://www.cnblogs.com/mybilibili/p/11630148.html
頁:
[1]