获取数据以及组件生命周期

Examples

如果你需要一个有状态、生命周期或有初始数据的 React 组件（而不是上面的无状态函数），如下所示：

  1. import React from 'react'
  2.  
  3. export default class extends React.Component {
  4.   static async getInitialProps({ req }) {
  5.     const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
  6.     return { userAgent }
  7.   }
  8.  
  9.   render() {
  10.     return (
  11.       <div>
  12.         Hello World {this.props.userAgent}
  13.       </div>
  14.     )
  15.   }
  16. }

相信你注意到，当页面渲染时加载数据，我们使用了一个异步方法getInitialProps。它能异步获取 JS 普通对象，并绑定在props上

当服务渲染时，getInitialProps将会把数据序列化，就像JSON.stringify。所以确保getInitialProps返回的是一个普通 JS 对象，而不是Date, Map 或 Set类型。

当页面初次加载时，getInitialProps只会在服务端执行一次。getInitialProps只有在路由切换的时候（如Link组件跳转或路由自定义跳转）时，客户端的才会被执行。

当页面初始化加载时，getInitialProps只会加载在服务端。只有当路由跳转（Link组件跳转或 API 方法跳转）时，客户端才会执行getInitialProps。

注意：getInitialProps将不能使用在子组件中。只能使用在pages页面中。

只有服务端用到的模块放在getInitialProps里，请确保正确的导入了它们，可参考import them properly。否则会拖慢你的应用速度。

你也可以给无状态组件定义getInitialProps：

  1. const Page = ({ stars }) =>
  2.   <div>
  3.     Next stars: {stars}
  4.   </div>
  5.  
  6. Page.getInitialProps = async ({ req }) => {
  7.   const res = await fetch('https://api.github.com/repos/zeit/next.js')
  8.   const json = await res.json()
  9.   return { stars: json.stargazers_count }
  10. }
  11.  
  12. export default Page

getInitialProps入参对象的属性如下：

  • pathname - URL 的 path 部分
  • query - URL 的 query 部分，并被解析成对象
  • asPath - 显示在浏览器中的实际路径（包含查询部分），为String类型
  • req - HTTP 请求对象 (只有服务器端有)
  • res - HTTP 返回对象 (只有服务器端有)
  • jsonPageRes - 获取数据响应对象 (只有客户端有)
  • err - 渲染过程中的任何错误