Quiet-Night

Next.js v4.1.4 文档中文翻译

最近想稍稍看下 React的 SSR框架 Next.js，因为不想看二手资料，
所以自己跑到 Github上看，Next.js的文档是英文的，看倒是大概也能看得懂，
但有些地方不太确定，而且英文看着毕竟不太爽你懂得，所以在网上搜了几圈发现好像好像还没有中文翻译，想着长痛不如短痛，
索性一边看一边翻译，自己翻译的东西自己看得也爽，不过毕竟能力有限，有些地方我也不知道该怎么翻译才好，所以翻译得不太通畅，
或者有几句干脆不翻译了。

so，各位若是觉得我哪点翻译得不太准确，或者对于那几句我没翻译的地方有更好的见解，欢迎提出~

以下是全文翻译的 Next.js的 README.md文件，版本是 v4.1.4，除了翻译原文之外，还加了一点个人小小见解。

另外，本文翻译已经放到了我的 github上，想要更好的阅读体验可以去看下，别忘了 star哦~

Next.js是一个用于React应用的极简的服务端渲染框架。

请访问 learnnextjs.com 以获取更多详细内容.

如何使用
- 安装
- 代码自动分割
- CSS
- 嵌入式样式(Built-in-CSS)
- 内联式样式(CSS-in-JS)
- 静态文件服务 (例如: images)
- 自定义头部元素
- 数据获取及组件生命周期
- 路由
- 命令式路由
  - 路由事件
  - 浅层路由(Shallow Routing)
- 使用高阶函数(HOC)
- 预获取页面(Prefetching Pages)
- 通过组件
- 通过命令的方式
- 自定义服务器和路由
- 异步导入(Dynamic Import)
- 自定义
- 自定义错误处理
- 自定义配置
- 自定义 webpack 配置
- 自定义 babel 配置
- CDN支持
项目部署
导出静态 HTML 页面面
相关技巧
FAQ
contributing
authors

如何使用

安装

安装方法:

npm install --save next react react-dom

Next.js 4 只支持 React 16.

由于 React 16 和 React 15 的工作方式以及使用方法不尽相同，所以我们不得不移除了对 React 15 的支持

在你的 package.json文件中添加如下代码：

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

接下来，大部分事情都交由文件系统来处理。每个 .js 文件都变成了一个自动处理和渲染的路由。

在项目中新建 ./pages/index.js：

export default () => Welcome to next.js!

然后，在控制台输入 npm run dev命令，打开 http://localhost:3000即可看到程序已经运行，你当然也可以使用其他的端口号，可以使用这条命令：npm run dev -- -p 。

目前为止，我们已经介绍了:

自动编译和打包 (使用 webpack 和 babel)
代码热更新
以 ./pages目录作为页面渲染目录的的服务器端渲染
静态文件服务(./static/ 被自动定位到 /static/)

想要亲自试试这些到底有多简单， check out sample app - nextgram

代码自动分割

你所声明的每个 import命令所导入的文件会只会与相关页面进行绑定并提供服务，也就是说，页面不会加载不需要的代码。

import cowsay from 'cowsay-browser'

export default () =>
      {cowsay.say({ text: 'hi there!' })}

CSS

嵌入式样式 Built-in-CSS

Examples

Basic css

我们提供 style-jsx来支持局部独立作用域的 CSS(scope CSS)，目的是提供一种类似于 Web组件的 shadow CSS，不过，后者(即shadow CSS)并不支持服务器端渲染(scope CSS是支持的)。

export default () =>
  <div>
    Hello world
    <p>scoped!p>
    <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}style>
    <style global jsx>{`
      body {
        background: black;
      }
    `}style>
  div>

更多示例可见 styled-jsx documentation

译者注：
1. scope CSS的作用范围，如果添加了 jsx属性，则是不包括子组件的当前组件；如果添加了 global 和 jsx属性，则是包括了子组件在内的当前组件；如果没添加任何属性，则作用与添加了 global 和 jsx的作用类似，只不过 next不会对其进行额外的提取与优化打包
2. scope CSS的实现原理，其实就是在编译好的代码的对应元素上，添加一个以 jsx开头的类名(class)，然后将对应的样式代码提取到此类名下

内联式样式 CSS-in-JS

Examples

Styled components
Styletron
Glamor
Glamorous
Cxs
Aphrodite
Fela

几乎可以使用所有的内联样式解决方案，最简单一种如下：

export default () => color: 'red' }}>hi there

为了使用更多复杂的 CSS-in-JS 内联样式方案，你可能不得不在服务器端渲染的时候强制样式刷新。我们通过允许自定义包裹着每个页面的组件的方式来解决此问题。

静态文件服务

在你的项目的根目录新建 static 文件夹，然后你就可以在你的代码通过 /static/ 开头的路径来引用此文件夹下的文件：

export default () => "/static/my-image.png" />

自定义头部元素

Examples

Head elements
Layout component

我们暴露了一个用于将元素追加到中的组件。

import Head from 'next/head'

export default () =>
  <div>
    <Head>
      <title>My page titletitle>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    Head>
    <p>Hello world!p>
  div>

注意：当组件卸载的时候，组件内定义的将会被清空，所以请确保每个页面都在其各自的内声明了其所有需要的内容，而不是假定这些东西已经在其他页面中添加过了。

译者注：
1. next 框架自带标签，作为当前页面的，如果在组件内自定义了，则自定义内的元素(例如 </code>、<code><meta></code>等)将会被追加到框架自带的 <code><head></code>标签中 2. 每个组件自定义的 <code><Head></code>内容只会应用在各自的页面上，子组件内定义的 <code><Head></code>也会追加到当前页面的 <code><head></code>内，如果有重复定义的标签或属性，则子组件覆盖父组件，位于文档更后面的组件覆盖更前面的组件。 </blockquote> <h3 id="数据获取及组件生命周期">数据获取及组件生命周期</h3> Examples <ul> <li>Data fetch</li> </ul> 你可以通过导出一个基于 <code>React.Component</code>的组件来获取状态(<code>state</code>)、生命周期或者初始数据（而不是一个无状态函数(<code>stateless</code>)，就像上面的一段代码） <pre class="prettyprint"><code class="language-jsx hljs axapta">import React from 'react' export default class 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> ) } }</code></pre> 你可能已经注意到了，当加载页面获取数据的时候，我们使用了一个异步(<code>async</code>)的静态方法 <code>getInitialProps</code>。此静态方法能够获取所有的数据，并将其解析成一个 <code>JavaScript</code>对象，然后将其作为属性附加到 <code>props</code>对象上。 当初始化页面的时候，<code>getInitialProps</code>只会在服务器端执行，而当通过 <code>Link</code>组件或者使用命令路由 <code>API</code>来将页面导航到另外一个路由的时候，此方法就只会在客户端执行。 注意：<code>getInitialProps</code> 不能 在子组件上使用，只能应用于当前页面的顶层组件。 <blockquote> 如果你在 <code>getInitialProps</code> 中引入了一些只能在服务器端使用的模块(例如一些 <code>node.js</code>的核心模块)，请确保通过正确的方式来导入它们 import them properly，否则的话，那很可能会拖慢应用的速度。 </blockquote> 你也可以为无状态(<code>stateless</code>)组件自定义 <code>getInitialProps</code>生命周期方法： <pre class="prettyprint"><code class="language-jsx hljs coffeescript">const Page = ({ stars }) => <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> <code>getInitialProps</code> 接收的上下文对象包含以下属性： - <code>pathname</code> - <code>URL</code>的 <code>path</code>部分 - <code>query</code> - <code>URL</code>的 <code>query string</code>部分，并且其已经被解析成了一个对象 - <code>asPath</code> - 在浏览器上展示的实际路径(包括 <code>query</code>字符串) - <code>req</code> - <code>HTTP request</code> 对象 (只存在于服务器端) - <code>res</code> - <code>HTTP response</code> 对象 (只存在于服务器端) - <code>jsonPageRes</code> - 获取的响应数据对象 Fetch Response (只存在于客户端) - <code>err</code> - 渲染时发生错误抛出的错误对象 <blockquote> 译者注： 基于 <code>getInitialProps</code>在服务器端和客户端的不同表现，例如 <code>req</code>的存在与否，可以通过此来区分服务器端和客户端。 </blockquote> <h3 id="路由">路由</h3> <h4 id="link"><code><Link></code></h4> Examples <ul> <li>Hello World</li> </ul> 可以通过 <code><Link></code> 组件来实现客户端在两个路由间的切换功能，例如下面两个页面： <pre class="prettyprint"><code class="language-jsx hljs livecodeserver">// pages/index.js import Link from 'next/link' export default () => <div> Click{' '} <Link href="/about"> <a>here</a> </Link>{' '} to read more </div></code></pre> <pre class="prettyprint"><code class="language-jsx hljs coffeescript">// pages/about.js export default () => Welcome to About!</code></pre> 注意：可以使用 <code><Link prefetch></code> 来让页面在后台同时获取和预加载，以获得最佳的页面加载性能 客户端路由行为与浏览器完全相同： <ol> <li>获取组件</li> <li>如果组件定义了 <code>getInitialProps</code>，那么进行数据的获取，如果抛出异常，则将渲染<code>_error.js</code></li> <li>在步骤<code>1</code>和步骤<code>2</code>完成后，<code>pushState</code>开始执行，接着新组件将会被渲染</li> </ol> 每一个顶层组件都会接收到一个 <code>url</code>属性，其包括了以下 <code>API</code>: <ul> <li><code>pathname</code> - 不包括 <code>query</code>字符串在内的当前链接地址的 <code>path</code>字符串(即<code>pathname</code>)</li> <li><code>query</code> - 当前链接地址的 <code>query</code>字符串，已经被解析为对象，默认为 <code>{}</code></li> <li><code>asPath</code> - 在浏览器地址栏显示的当前页面的实际地址(包括 <code>query</code>字符串)</li> <li><code>push(url, as=url)</code> - 通过 <code>pushState</code>来跳转路由到给定的 <code>url</code></li> <li><code>replace(url, as=url)</code> - 通过 <code>replaceState</code>来将当前路由替换到给定的路由地址 <code>url</code>上</li> </ul> <code>push</code> 以及 <code>replace</code>的第二个参数 <code>as</code>提供了额外的配置项，当你在服务器上配置了自定义路由的话，那么此参数就会发挥作用。 <blockquote> 译者注1： 上面那句话的意思是，<code>as</code>可以根据服务器端路由的配置作出相应的路由改变，例如，在服务器端，你自定义规定当获取 <code>/a</code>的 <code>path</code>请求的时候，返回一个位于 <code>/b</code>目录下的页面，则为了配合服务器端的这种指定，你可以这么定义 <code><Link/></code>组件： <code><Link href='/b' as='/a'><a>a</a></Link></code>。 这种做法有一个好处，那就是尽管你将 <code>/a</code>请求指定到了 <code>/b</code>页面，但是因为<code>as</code>的值为 <code>/a</code>，所以编译后的 <code>DOM</code>元素显示的链接的 <code>href</code>值为 <code>/a</code>，但是当真正点击链接时，响应的真正页面还是 <code>/b</code> 译者注2： <code><Link></code>组件主要用于路由跳转功能，其可以接收一个必须的子元素(<code>DOM</code>标签或者纯文字等) 1. 如果添加的子元素是 <code>DOM</code>元素，则 <code>Link</code>会为此子元素赋予路由跳转功能； 2. 如果添加的元素是纯文字，则 <code><Link></code>默认转化为 <code>a</code>标签，包裹在此文字外部(即作为文字的父元素)，如果当前组件有 <code>jsx</code>属性的 <code>scope CSS</code>，这个 <code>a</code>标签是不会受此 <code>scope CSS</code>影响的，也就是说，不会加上以 <code>jsx</code>开头的类名。 需要注意的是，直接添加纯文字作为子元素的做法如今已经不被赞成了(deprecated)。 </blockquote> <h5 id="url-对象">URL 对象</h5> Examples <ul> <li>With URL Object Routing</li> </ul> <code><Link></code>组件可以接收一个 <code>URL</code>对象，此 <code>URL</code>对象将会被自动格式化为 <code>URL</code>字符串。 <pre class="prettyprint"><code class="language-jsx hljs handlebars">// pages/index.js import Link from 'next/link' export default () => <div> Click{' '} <Link href={{ pathname: '/about', query: { name: 'Zeit' } }}> <a>here</a> </Link>{' '} to read more </div></code></pre> 上述代码中 <code><Link></code>组件的将会根据 <code>href</code>属性的对象值生成一个 <code>/about?name=Zeit</code>的 <code>URL</code>字符串，你也可以在此 <code>URL</code>对象中使用任何已经在 Node.js URL module documentation 中定义好了的属性来配置路由。 <h5 id="替换-replace而非追加push路由-url">替换 (<code>replace</code>)而非追加(<code>push</code>)路由 <code>url</code></h5> <code><Link></code>组件默认将新的 <code>URL</code>追加 (<code>push</code>)到路由栈中，但你可以使用 <code>replace</code>属性来避免此追加动作(直接替换掉当前路由)。 <pre class="prettyprint"><code class="language-jsx hljs livecodeserver">// pages/index.js import Link from 'next/link' export default () => <div> Click{' '} <Link href="/about" replace> <a>here</a> </Link>{' '} to read more </div></code></pre> <h5 id="让组件支持-onclick事件">让组件支持 <code>onClick</code>事件</h5> <code><Link></code> supports any component that supports the <code>onClick</code> event. In case you don’t provide an <code><a></code> tag, it will only add the <code>onClick</code> event handler and won’t pass the <code>href</code> property. <code><Link></code>标签支持所有支持 <code>onClick</code>事件的组件(即只要某组件或者元素标签支持 <code>onClick</code>事件，则 <code><Link></code>就能够为其提供跳转路由的功能)。如果你没有给 <code><Link></code>标签添加一个 <code><a></code>标签的子元素的话，那么它只会执行给定的 <code>onClick</code>事件，而不是执行跳转路由的动作。 <pre class="prettyprint"><code class="language-jsx hljs coffeescript">// pages/index.js import Link from 'next/link' export default () => <div> Click{' '} <Link href="/about"> <img src="/static/image.png" /> </Link> </div></code></pre> <h5 id="将-link的-href暴露给其子元素child">将 <code><Link></code>的 <code>href</code>暴露给其子元素(<code>child</code>)</h5> 如果 <code><Link></code>的子元素是一个 <code><a></code>标签并且没有指定 <code>href</code>属性的话，那么我们会自动指定此属性(与 <code><Link></code>的 <code>herf</code>相同)以避免重复工作，然而有时候，你可能想要通过一个被包裹在某个容器(例如组件)内的 <code><a></code>标签来实现跳转功能，但是 <code>Link</code>并不认为那是一个超链接，因此，就不会把它的 <code>href</code>属性传递给子元素，为了避免此问题，你应该给 <code>Link</code>附加一个 <code>passHref</code>属性，强制让 <code>Link</code>将其 <code>href</code>属性传递给它的子元素。 <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import Link from 'next/link' import Unexpected_A from 'third-library' export default ({ href, name }) => <Link href={href} passHref> <Unexpected_A> {name} </Unexpected_A> </Link></code></pre> <h4 id="命令式路由">命令式路由</h4> Examples <ul> <li>Basic routing</li> <li>With a page loading indicator</li> </ul> 你可以使用 <code>next/router</code>来实现客户端侧的页面切换 <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import Router from 'next/router' export default () => <div> Click () => Router.push('/about')}>here to read more </div></code></pre> 上述代码中的 <code>Router</code>对象拥有以下 <code>API</code>： <ul> <li><code>route</code> - 当前路由字符串</li> <li><code>pathname</code> - 不包括查询字符串(<code>query string</code>)在内的当前路由的 <code>path</code>(也就是 <code>pathname</code>)</li> <li><code>query</code> - <code>Object</code> with the parsed query string. Defaults to <code>{}</code></li> <li><code>asPath</code> - 在浏览器地址栏显示的当前页面的实际地址(包括 <code>query</code>字符串)</li> <li><code>push(url, as=url)</code> - 通过 <code>pushState</code>来跳转路由到给定的 <code>url</code></li> <li><code>replace(url, as=url)</code> - 通过 <code>replaceState</code>来将当前路由替换到给定的路由地址 <code>url</code>上</li> </ul> <code>push</code> 以及 <code>replace</code>的第二个参数 <code>as</code>提供了额外的配置项，当你在服务器上配置了自定义路由的话，那么此参数就会发挥作用。 为了使用编程的方式而不是触发导航和组件获取的方式来切换路由，可以在组件内部使用 <code>props.url.push</code> 和 <code>props.url.replace</code> <blockquote> 译者注： 除非特殊需要，否则在组件内部不赞成(deprecated)使用 <code>props.url.push</code> 和 <code>props.url.replace</code>，而是建议使用 <code>next/router</code>的相关 <code>API</code>。 </blockquote> <h5 id="url-对象-1">URL 对象</h5> 命令式路由 (<code>next/router</code>)所接收的 <code>URL</code>对象与 <code><Link></code>的 <code>URL</code>对象很类似，你可以使用相同的方式来<code>push</code> 和 <code>replace</code>路由<code>URL</code> <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import Router from 'next/router' const handler = () => Router.push({ pathname: '/about', query: { name: 'Zeit' } }) export default () => <div> Click here to read more </div></code></pre> 命令式路由 (<code>next/router</code>)的 <code>URL</code>对象的属性及其参数的使用方法和 <code><Link></code>组件的完全一样。 <h5 id="路由事件">路由事件</h5> 你还可以监听到与 <code>Router</code>相关的一些事件。 以下是你所能够监听的 <code>Router</code>事件: <ul> <li><code>routeChangeStart(url)</code> - 当路由刚开始切换的时候触发</li> <li><code>routeChangeComplete(url)</code> - 当路由切换完成时触发</li> <li><code>routeChangeError(err, url)</code> - 当路由切换发生错误时触发</li> <li><code>beforeHistoryChange(url)</code> - 在改变浏览器 <code>history</code>之前触发</li> <li><code>appUpdated(nextRoute)</code> - 当切换页面的时候，应用版本刚好更新的时触发(例如在部署期间切换路由)</li> </ul> <blockquote> Here <code>url</code> is the URL shown in the browser. If you call <code>Router.push(url, as)</code> (or similar), then the value of <code>url</code> will be <code>as</code>. 上面 <code>API</code>中的 <code>url</code>参数指的是浏览器地址栏显示的链接地址，如果你使用 <code>Router.push(url, as)</code>(或者类似的方法)来改变路由，则此值就将是 <code>as</code>的值 </blockquote> 下面是一段如何正确地监听路由事件 <code>routeChangeStart</code>的示例代码： <pre class="prettyprint"><code class="language-js hljs ">Router.onRouteChangeStart = url => { console.log('App is changing to: ', url) }</code></pre> 如果你不想继续监听此事件了，那么你也可以很轻松地卸载掉此监听事件，就像下面这样： <pre class="prettyprint"><code class="language-js hljs ">Router.onRouteChangeStart = null</code></pre> 如果某个路由加载被取消掉了(例如连续快速地单击两个链接)，<code>routeChangeError</code> 将会被执行。此方法的第一个参数 <code>err</code>对象中将包括一个值为 <code>true</code>的 <code>cancelled</code>属性。 <pre class="prettyprint"><code class="language-js hljs ">Router.onRouteChangeError = (err, url) => { if (err.cancelled) { console.log(`Route to ${url} was cancelled!`) } }</code></pre> 如果你在一次项目新部署的过程中改变了路由，那么我们就无法在客户端对应用进行导航，必须要进行一次完整的导航动作(译者注：意思是无法像正常那样通过 <code>PWA</code>的方式进行导航)，我们已经自动帮你做了这些事。 不过，你也可以通过 <code>Route.onAppUpdated</code>事件对此进行自定义操作，就像下面这样： <pre class="prettyprint"><code class="language-js hljs ">Router.onAppUpdated = nextUrl => { // persist the local state location.href = nextUrl }</code></pre> <blockquote> 译者注： 一般情况下，上述路由事件的发生顺序如下： 1. <code>routeChangeStart</code> 2. <code>beforeHistoryChange</code> 3. <code>routeChangeComplete</code> </blockquote> <h5 id="浅层路由">浅层路由</h5> Examples <ul> <li>Shallow Routing</li> </ul> 浅层路由(<code>Shallow routing</code>)允许你在不触发 <code>getInitialProps</code>的情况下改变路由(<code>URL</code>)，你可以通过要加载页面的 <code>url</code>来获取更新后的 <code>pathname</code> 和 <code>query</code>，这样就不会丢失路由状态(<code>state</code>)了。 你可以通过调用 <code>Router.push</code> 或 <code>Router.replace</code>，并给它们加上 <code>shallow: true</code>的配置参数来实现此功能，下面是一个使用示例： <pre class="prettyprint"><code class="language-js hljs ">// Current URL is "/" const href = '/?counter=10' const as = href Router.push(href, as, { shallow: true })</code></pre> 现在，<code>URL</code>已经被更新到了 <code>/?counter=10</code>，你可以在组件内部通过 <code>this.props.url</code>来获取此 <code>URL</code> 你可以在 <code>componentWillReceiveProps</code>钩子函数中获取到 <code>URL</code>的变化，就像下面这样： <pre class="prettyprint"><code class="language-js hljs ">componentWillReceiveProps(nextProps) { const { pathname, query } = nextProps.url // fetch data based on the new query }</code></pre> <blockquote> 注意: 浅层路由只会在某些页面上起作用，例如，我们可以假定存在另外一个名为 <code>about</code>的页面，然后执行下面这行代码： <pre class="prettyprint"><code class="language-js hljs ">Router.push('/about?counter=10', '/about?counter=10', { shallow: true })</code></pre> 因为这是一个新的页面(<code>/about?counter=10</code>)，所以即使我们已经声明了只执行浅层路由，但当前页面仍然会被卸载掉(<code>unload</code>)，然后加载这个新的页面并调用 <code>getInitialProps</code>方法 </blockquote> <h4 id="使用高阶函数-hoc">使用高阶函数 HOC</h4> Examples <ul> <li>Using the `withRouter` utility</li> </ul> 如果你想在应用的任何组件都能获取到 <code>router</code>对象，那么你可以使用 <code>withRouter</code>高阶函数，下面是一个使用此高阶函数的示例： <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import { withRouter } from 'next/router' const ActiveLink = ({ children, router, href }) => { const style = { marginRight: 10, color: router.pathname === href? 'red' : 'black' } const handleClick = (e) => { e.preventDefault() router.push(href) } return ( <a href={href} onClick={handleClick} style={style}> {children} </a> ) } export default withRouter(ActiveLink)</code></pre> 上述代码中的 <code>router</code>对象拥有和 <code>next/router</code> 相同的 <code>API</code>。 <h3 id="预获取页面-prefetching-pages">预获取页面 Prefetching Pages</h3> (下面就是一个小例子) Examples <ul> <li>Prefetching</li> </ul> <code>Next.js</code>自带允许你预获取(<code>prefetch</code>)页面的 <code>API</code> 因为 <code>Next.js</code>在服务器端渲染页面，所以应用的所有将来可能发生交互的相关链接路径可以在瞬间完成交互，事实上 <code>Next.js</code>可以通过预下载功能来达到一个绝佳的加载性能。[更多详细可见](Read more.) <blockquote> 由于 <code>Next.js</code>只会预加载 <code>JS</code>代码，所以在页面加载的时候，你可以还需要花点时间来等待数据的获取。 </blockquote> <h4 id="通过-link-组件">通过 <code><Link></code> 组件</h4> 你可以为任何一个 <code><Link></code>组件添加 <code>prefetch</code>属性，<code>Next.js</code>将会在后台预加载这些页面。 <pre class="prettyprint"><code class="language-jsx hljs xml">import Link from 'next/link' // example header component export default () => <nav> <ul> <li> <Link prefetch href="/"> <a>Home</a> </Link> </li> <li> <Link prefetch href="/about"> <a>About</a> </Link> </li> <li> <Link prefetch href="/contact"> <a>Contact</a> </Link> </li> </ul> </nav></code></pre> <h4 id="通过命令的方式">通过命令的方式</h4> 大部分预获取功能都需要通过 <code><Link></code>组件来指定链接地址，但是我们还暴露了一个命令式的 <code>API</code>以方便更加复杂的场景： <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import Router from 'next/router' export default ({ url }) => <div> <a onClick={() => setTimeout(() => url.pushTo('/dynamic'), 100)}> A route transition will happen after 100ms </a> {// but we can prefetch it! Router.prefetch('/dynamic')} </div></code></pre> <h3 id="自定义服务器和路由">自定义服务器和路由</h3> Examples <ul> <li>Basic custom server</li> <li>Express integration</li> <li>Hapi integration</li> <li>Koa integration</li> <li>Parameterized routing</li> <li>SSR caching</li> </ul> 一般来说，你可以使用 <code>next start</code>命令启动 <code>next</code>服务，但是，你也完全可以使用编程(<code>programmatically</code>)的方式，例如路由匹配等，来定制化路由。 下面就是一个将 <code>/a</code>匹配到 <code>./page/b</code>，以及将 <code>/b</code>匹配到 <code>./page/a</code>的例子： <pre class="prettyprint"><code class="language-js hljs ">// This file doesn't not go through babel or webpack transformation. // Make sure the syntax and sources this file requires are compatible with the current node version you are running // See https://github.com/zeit/next.js/issues/1245 for discussions on Universal Webpack or universal Babel const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer((req, res) => { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { app.render(req, res, '/b', query) } else if (pathname === '/b') { app.render(req, res, '/a', query) } else { handle(req, res, parsedUrl) } }).listen(3000, err => { if (err) throw err console.log('> Ready on http://localhost:3000') }) })</code></pre> <code>next API</code>如下所示： - <code>next(path: string, opts: object)</code> - <code>path</code>是 <code>Next</code>应用当前的路由位置 - <code>next(opts: object)</code> 上述 <code>API</code>中的 <code>opt</code>对象存在如下属性： - <code>dev</code> (<code>bool</code>) 是否使用开发模式(<code>dev</code>)来启动 <code>Next.js</code> - 默认为 <code>false</code> - <code>dir</code> (<code>string</code>) 当前 <code>Next</code>应用的路由位置 - 默认为 <code>'.'</code> - <code>quiet</code> (<code>bool</code>) 隐藏包括服务器端消息在内的错误消息 - 默认为 <code>false</code> - <code>conf</code> (<code>object</code>) 和<code>next.config.js</code> 中的对象是同一个 - 默认为 <code>{}</code> 然后，将你(在 <code>package.json</code>中配置)的 <code>start</code>命令(<code>script</code>)改写成 <code>NODE_ENV=production node server.js</code>。 <h3 id="异步导入-dynamic-import">异步导入 Dynamic Import</h3> Examples <ul> <li>With Dynamic Import</li> </ul> <code>Next.js</code>支持 <code>JavaScript TC39</code> 的dynamic import proposal规范，所以你可以动态导入(<code>import</code>) <code>JavaScript</code> 模块(例如 <code>React Component</code>)。 你可以将动态导入理解为一种将代码分割为更易管理和理解的方式。 由于 <code>Next.js</code>支持服务器端渲染侧(<code>SSR</code>)的动态导入，所以你可以用它来做一些炫酷的东西。 <h4 id="1-基本用法同样支持-ssr">1. 基本用法（同样支持 <code>SSR</code>）</h4> <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import dynamic from 'next/dynamic' const DynamicComponent = dynamic(import('../components/hello')) export default () => <div> <Header /> <DynamicComponent /> HOME PAGE is here! </div></code></pre> <h4 id="2-自定义-加载组件">2. 自定义加载组件</h4> <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import dynamic from 'next/dynamic' const DynamicComponentWithCustomLoading = dynamic( import('../components/hello2'), { loading: () => ... } ) export default () => <div> <Header /> <DynamicComponentWithCustomLoading /> HOME PAGE is here! </div></code></pre> <h4 id="3-禁止-ssr">3. 禁止 <code>SSR</code></h4> <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import dynamic from 'next/dynamic' const DynamicComponentWithNoSSR = dynamic(import('../components/hello3'), { ssr: false }) export default () => <div> <Header /> <DynamicComponentWithNoSSR /> HOME PAGE is here! </div></code></pre> <h4 id="4-一次性加载多个模块">4. 一次性加载多个模块</h4> <pre class="prettyprint"><code class="language-jsx hljs coffeescript">import dynamic from 'next/dynamic' const HelloBundle = dynamic({ modules: props => { const components = { Hello1: import('../components/hello1'), Hello2: import('../components/hello2') } // Add remove components based on props return components }, render: (props, { Hello1, Hello2 }) => <div> <h1> {props.title} </h1> <Hello1 /> <Hello2 /> </div> }) export default () => <HelloBundle title="Dynamic Bundle" /></code></pre> <h3 id="自定义-document">自定义 <code><Document></code></h3> Examples <ul> <li>Styled components custom document</li> </ul> <ul> <li>Google AMP</li> </ul> <code>Next.js</code>帮你自动跳过了在为页面添加文档标记元素的操作，例如，你从来不需要主动添加 <code><html></code>、<code><body></code>这些文档元素。如果你想重定义这些默认操作的话，那么你可以创建(或覆写) <code>./page/_ducument.js</code>文件，在此文件中，对 <code>Document</code>进行扩展： <pre class="prettyprint"><code class="language-jsx hljs php">// ./pages/_document.js import Document, { Head, Main, NextScript } from 'next/document' import flush from 'styled-jsx/server' export default class MyDocument extends Document { static getInitialProps({ renderPage }) { const { html, head, errorHtml, chunks } = renderPage() const styles = flush() return { html, head, errorHtml, chunks, styles } } render() { return ( <html> <Head> <style>{`body { margin: 0 } /* custom! */`}</style> </Head> <body className="custom_class"> {this.props.customValue} <Main /> <NextScript /> </body> </html> ) } }</code></pre> 在以下前提下，所有的 <code>getInitialProps</code> 钩子函数接收到的 <code>ctx</code>都指的是同一个对象： <ul> <li>回调函数 <code>renderPage</code> (<code>Function</code>)是真正执行 <code>React</code>渲染逻辑的函数(同步地)，这种做法有助于此函数支持一些类似于 <code>Aphrodite's</code>的 <code>renderStatic</code>等一些服务器端渲染容器。</li> </ul> 注意：<code><Main/></code>之外的 <code>React</code>组件都不会被浏览器初始化，如果你想在所有的页面中使用某些组件(例如菜单栏或者工具栏)，首先保证不要在其中添加有关应用逻辑的内容，然后可以看看这个例子 <h3 id="自定义错误处理">自定义错误处理</h3> 客户端和服务器端都会捕获并使用默认组件 <code>error.js</code>来处理 <code>404</code> 和 <code>500</code>错误。如果你希望自定义错误处理，可以对其进行覆写： <pre class="prettyprint"><code class="language-jsx hljs axapta">import React from 'react' export default class Error extends React.Component { static getInitialProps({ res, jsonPageRes }) { const statusCode = res ? res.statusCode : jsonPageRes ? jsonPageRes.status : null return { statusCode } } render() { return ( {this.props.statusCode ? `An error ${this.props.statusCode} occurred on server` : 'An error occurred on client'} ) } }</code></pre> <h3 id="使用内置的错误页面">使用内置的错误页面</h3> 如果你想使用内置的错误页面，那么你可以通过 <code>next/error</code>来实现： <pre class="prettyprint"><code class="language-jsx hljs axapta">import React from 'react' import Error from 'next/error' import fetch from 'isomorphic-fetch' export default class Page extends React.Component { static async getInitialProps() { const res = await fetch('https://api.github.com/repos/zeit/next.js') const statusCode = res.statusCode > 200 ? res.statusCode : false const json = await res.json() return { statusCode, stars: json.stargazers_count } } render() { if (this.props.statusCode) { return <Error statusCode={this.props.statusCode} /> } return ( <div> Next stars: {this.props.stars} </div> ) } }</code></pre> <blockquote> 如果你想使用自定义的错误页面，那么你可以导入你自己的错误(<code>_error</code>)页面组件而非内置的 <code>next/error</code> 译者注： 如果你只是想覆写默认的错误页面，那么可以在 <code>/pages</code>下新建一个名为 <code>_error.js</code>的文件，<code>Next</code>将使用此文件来覆盖默认的错误页面 </blockquote> <h3 id="自定义配置">自定义配置</h3> 为了对 <code>Next.js</code>进行更复杂的自定义操作，你可以在项目的根目录下(和 <code>pages/</code>以及 <code>package.json</code>属于同一层级)新建一个 <code>nexr.config.js</code>文件 注意：<code>next.confgi.js</code>是一个标准的 <code>Node.js</code>模块，而不是一个 <code>JSON</code>文件，此文件在 <code>Next</code>项目的服务端以及 <code>build</code>阶段会被调用，但是在浏览器端构建时是不会起作用的。 <pre class="prettyprint"><code class="language-js hljs ">// next.config.js module.exports = { /* config options here */ }</code></pre> <h4 id="设置一个自定义的构建build目录">设置一个自定义的构建(<code>build</code>)目录</h4> 你可以自行指定构建打包的输出目录，例如，下面的配置将会创建一个 <code>build</code>目录而不是 <code>.next</code>作为构建打包的输出目录，如果没有特别指定的话，那么默认就是 <code>.next</code> <pre class="prettyprint"><code class="language-js hljs ">// next.config.js module.exports = { distDir: 'build' }</code></pre> <h4 id="configuring-the-ondemandentries">Configuring the onDemandEntries</h4> <code>Next</code> 暴露了一些能够让你自己控制如何部署服务或者缓存页面的配置： <pre class="prettyprint"><code class="language-js hljs ">module.exports = { onDemandEntries: { // 控制页面在内存`buffer`中缓存的时间，单位是 ms maxInactiveAge: 25 * 1000, // number of pages that should be kept simultaneously without being disposed pagesBufferLength: 2, } }</code></pre> <h3 id="自定义-webpack-配置">自定义 webpack 配置</h3> Examples <ul> <li>Custom webpack bundle analyzer</li> </ul> 你可以通过 <code>next.config.js</code>中的函数来扩展 <code>webpack</code>的配置 <pre class="prettyprint"><code class="language-js hljs ">// This file is not going through babel transformation. // So, we write it in vanilla JS // (But you could use ES2015 features supported by your Node.js version) module.exports = { webpack: (config, { buildId, dev }) => { // Perform customizations to webpack config // Important: return the modified config return config }, webpackDevMiddleware: config => { // Perform customizations to webpack dev middleware config // Important: return the modified config return config } }</code></pre> 警告：不推荐在 <code>webpack</code>的配置中添加一个支持新文件类型(<code>css less svg</code>等)的 <code>loader</code>，因为 <code>webpack</code>只会打包客户端代码，所以(<code>loader</code>)不会在服务器端的初始化渲染中起作用。<code>Babel</code>是一个很好的替代品，因为其给服务器端和客户端提供一致的功能效果(例如，babel-plugin-inline-react-svg)。 <h3 id="自定义-babel-配置">自定义 Babel 配置</h3> Examples <ul> <li>Custom babel configuration</li> </ul> 为了扩展对 <code>Babel</code>的使用，你可以在应用的根目录下新建 <code>.babelrc</code>文件，此文件是非必须的。 如果此文件存在，那么我们就认为这个才是真正的<code>Babel</code>配置文件，因此也就需要为其定义一些 <code>next</code>项目需要的东西，并将之当做是<code>next/babel</code>的预设配置(<code>preset</code>) 这种设计是为了避免你有可能对我们能够定制 <code>babel</code>配置而感到诧异。 下面是一个 <code>.babelrc</code>文件的示例： <pre class="prettyprint"><code class="language-json hljs ">{ "presets": ["next/babel", "stage-0"] }</code></pre> <h3 id="cdn-支持">CDN 支持</h3> 你可以设定 <code>assetPrefix</code>项来配置 <code>CDN</code>源，以便能够与 <code>Next.js</code>项目的 <code>host</code>保持对应。 <pre class="prettyprint"><code class="language-js hljs ">const isProd = process.env.NODE_ENV === 'production' module.exports = { // You may only need to add assetPrefix in the production. assetPrefix: isProd ? 'https://cdn.mydomain.com' : '' }</code></pre> 注意：<code>Next.js</code>将会自动使用所加载脚本的 <code>CDN</code>域(作为项目的 <code>CDN</code>域)，但是对 <code>/static</code>目录下的静态文件就无能为力了。如果你想让那些静态文件也能用上<code>CDN</code>，那你就不得不要自己指定 <code>CDN</code>域，有种方法也可以让你的项目自动根据运行环境来确定 <code>CDN</code>域，可以看看这个例子 <h2 id="项目部署">项目部署</h2> 构建打包和启动项目被分成了以下两条命令： <pre class="prettyprint"><code class="language-bash hljs ">next build next start</code></pre> 例如，你可以像下面这样为 <code>now</code>项目配置 <code>package.json</code>文件： <pre class="prettyprint"><code class="language-json hljs ">{ "name": "my-app", "dependencies": { "next": "latest" }, "scripts": { "dev": "next", "build": "next build", "start": "next start" } }</code></pre> 然后就可以直接启动 <code>now</code>项目了！ <code>Next.js</code>也可以使用其他的托管方案，更多详细可以看一下这部分内容 ‘Deployment’ 注意：我们推荐你推送 <code>.next</code>，或者你自定义的打包输出目录(到托管方案上)(Please have a look at ‘Custom Config’，你还可以自定义一个专门用于放置配置文件(例如 <code>.npmignore</code>或 <code>.gitignore</code>)的文件夹。否则的话，使用 <code>files</code>或者 <code>now.files</code>来选择要部署的白名单(很明显要排除掉 <code>.next</code>或你自定义的打包输出目录) <h2 id="导出静态-html-页面">导出静态 HTML 页面</h2> Examples <ul> <li>Static export</li> </ul> 你可以将你的 <code>Next.js</code>应用当成一个不依赖于 <code>Node.js服务的</code>静态应用。此静态应用支持几乎所有的 <code>Next.js</code>特性，包括异步导航、预获取、预加载和异步导入等。 <h3 id="使用">使用</h3> 首先，<code>Next.js</code>的开发工作没什么变化，然后创建一个 <code>Next.js</code>的配置文件 config，就像下面这样： <pre class="prettyprint"><code class="language-js hljs ">// next.config.js module.exports = { exportPathMap: function() { return { '/': { page: '/' }, '/about': { page: '/about' }, '/readme.md': { page: '/readme' }, '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } }, '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } }, '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } } } } }</code></pre> <blockquote> 需要注意的是，如果声明的路径表示的是一个文件夹的话，那么最终将会导出一份类似于 <code>/dir-name/index.html</code>的文件，如果声明的路径是一个文件的话，那么最终将会以指定的文件名导出，例如上述代码中，就会导出一个 <code>readme.md</code>的文件。如果你使用了一个不是以 <code>.html</code>结尾的文件，那么在解析此文件的时候，你需要给 <code>text/html</code>设置一个 <code>Content-Type</code>头(<code>header</code>) </blockquote> 通过上述的类似代码，你可以指定你想要导出的静态页面。 接着，输入以下命令： <pre class="prettyprint"><code class="language-sh hljs ruby">next build next export</code></pre> 或许，你还可以在 <code>package.json</code>文件中多添加一条命令： <pre class="prettyprint"><code class="language-json hljs ">{ "scripts": { "build": "next build && next export" } }</code></pre> 现在就只需要输入这一条命令就行了： <pre class="prettyprint"><code class="language-sh hljs coffeescript">npm run build</code></pre> 这样，你在 <code>out</code>目录下就有了一个当前应用的静态网站了。 <blockquote> 你也可以自定义输出目录，更多帮助可以在命令行中输入 <code>next export -h</code> 获取 </blockquote> 现在，你就可以把输出目录(例如<code>/out</code>)部署到静态文件服务器了，需要注意的是，如果你想要部署到 <code>Github</code>上的话，那么需要需要增加一个步骤 例如，只需要进入 <code>out</code>目录，然后输入以下命令，就可以把你的应用部署到 ZEIT now <pre class="prettyprint"><code class="language-sh hljs mizar">now</code></pre> <h3 id="局限性">局限性</h3> 当你输入 <code>next export</code>命令时，我们帮你构建了应用的 <code>HTML</code>静态版本，在此阶段，我们将会执行页面中的 <code>getInitialProps</code>函数。 所以，你只能使用 <code>context</code>对象传递给 <code>getInitialProps</code>的 <code>pathname</code>、<code>query</code>和 <code>asPath</code> 字段，而 <code>req</code> 或 <code>res</code>则是不可用的(<code>res</code>和 <code>res</code>只在服务器端可用)。 <blockquote> 基于此，你也无法在我们预先构建 <code>HTML</code>文件的时候，动态的呈现 <code>HTML</code>页面，如果你真的想要这么做(指动态构建页面)的话，请使用 <code>next start</code> </blockquote> <h2 id="相关技巧">相关技巧</h2> <ul> <li>Setting up 301 redirects</li> <li>Dealing with SSR and server only modules</li> </ul> <h2 id="faq">FAQ</h2> 可用在生产环境使用吗? https://zeit.co 就是使用 <code>Next.js</code>构建的。 无论是开发者体验还是终端表现，它都超出预期，所以我们决定将它共享到社区中。 体积有多大? 客户端包的大小根据每个应用程序的功能等不同而不尽相同。 一个最简单的 <code>Next</code>程序包在 <code>gzip</code>压缩后可能只有 65kb 大小。 它(指Next.js) 和 <code>create-react-app</code>是差不多的吗? 是也不是。 说是，是因为二者都让你的开发变得更轻松。 说不是，则是因为 <code>Next.js</code>强制规定了一些目录结构，以便我们能实现更多高级的操作，例如： - 服务器端渲染(<code>SSR</code>) - 代码自动分割 此外，<code>Next.js</code>还内置了两个对于单页应用来说比较重要的特性： - Routing with lazy component loading: <code><Link></code> (by importing <code>next/link</code>) - 修改 <code><head></code>元素的方法(通过导入 <code>next/head</code>) 如果你想在 <code>Next.js</code>或其他 <code>React</code>应用中复用组件，则使用 <code>create-react-app</code>是一个很好的选择，你可以稍后将其导入以保证代码库的纯净。 如何使用嵌入式CSS(<code>CSS-in-JS</code>)方案？ <code>Next.js</code>自带的库 styled-jsx支持局部(<code>scoped</code>)<code>css</code>，当然，你也可以在 <code>Next</code>应用中添加上面所提到的任何你喜欢的代码库来使用你想要的 <code>CSS-in-JS</code>解决方案。 如何使用类似于 SASS / SCSS / LESS 之类的 CSS 预处理器？ <code>Next.js</code>自带的库 styled-jsx支持局部(<code>scoped</code>)<code>css</code>，当然，你也可以在 <code>Next</code>应用中使用以下示例中的任何一种 <code>CSS</code>预处理器方案： <ul> <li>with-external-scoped-css</li> <li>with-scoped-stylesheets-and-postcss</li> <li>with-global-stylesheet</li> </ul> What syntactic features are transpiled? How do I change them? (语法特性)我们参照 <code>V8</code>引擎，因为 <code>V8</code>广泛支持 <code>ES6</code> 和 <code>async</code> 以及 <code>await</code>，所以我们也就支持这些，因为 <code>V8</code>还不支持类装饰器(<code>class decorator</code>)，所以我们也就不支持它(类装饰器) 可以看看这些以及这些 Why a new Router? Next.js is special in that: <ul> <li>Routes don’t need to be known ahead of time</li> <li>Routes are always lazy-loadable</li> <li>Top-level components can define <code>getInitialProps</code> that should block the loading of the route (either when server-rendering or lazy-loading)</li> </ul> 基于上述几个特点，我们能够构造出一个具有以下两个功能的简单路由： - 每个顶级组件都会接收到一个 <code>url</code>对象来检查 <code>url</code> 或者修改历史记录 - <code><Link /></code>组件作为类似于 <code><a/></code>等标签元素的容器以便进行客户端的页面切换。 我们已经在一些很有意思的场景下测试了路由的灵活性，更多相信可以看这里 nextgram 如何自定义路由? <code>Next.js</code>提供了一个 <code>request handler</code>，利用其我们能够让任意 <code>URL</code>与任何组件之间产生映射关系。 在客户端，<code><Link /></code>组件有个 <code>as</code>属性，它能够改变获取到的 <code>URL</code> 如何获取数据？ 这由你决定， <code>getInitialProps</code> 是一个异步(<code>async</code>)函数(或者也可以说是一个返回 <code>Promise</code>的标准函数)，它能够从任意位置获取数据。 能够配合使用 <code>GraphQL</code>吗 当然，这还有个用 Apollo 的例子呢。 能够配合使用 <code>Redux</code>吗？ 当然，这也有个例子。 为什么我不能在开发服务器中访问我的静态导出路由呢？ 这是一个已知的 <code>Next.js</code>架构问题，在解决方案还没内置到框架中之前，你可以先看看这一个例子中的解决方法来集中管理你的路由。 我可以在 Next应用中使用我喜欢的 JavaScript库或工具包吗？ 我们在发布第一版的时候就已经提供了很多例子，你可以看看这个目录 你们是怎么做出这个框架的? 我们力求达到的目标大部分都是从由 <code>Guillermo Rauch</code>给出的[设计富Web应用的 7个原则]中受到启发，<code>PHP</code>的易用性也是一个很棒的灵感来源，我们觉得在很多你想使用 <code>PHP</code>来输出 <code>HTML</code>页面的情况下，<code>Next.js</code>都是一个很好的替代品，不过不像 <code>PHP</code>，我们从 <code>ES6</code>的模块化系统中获得好处，每个文件都能很轻松地导入一个能够用于延迟求值或测试的组件或函数。 当我们研究 <code>React</code>的服务器端渲染时，我们并没有做出太大的改变，因为我们偶然发现了 <code>React</code>作者 <code>Jordan Walke</code>写的 react-page (now deprecated)。 <h2 id="contributing">Contributing</h2> Please see our contributing.md <h2 id="authors">Authors</h2> <ul> <li>Arunoda Susiripala (@arunoda) – ▲ZEIT</li> <li>Tim Neutkens (@timneutkens)</li> <li>Naoyuki Kanezawa (@nkzawa) – ▲ZEIT</li> <li>Tony Kovanen (@tonykovanen) – ▲ZEIT</li> <li>Guillermo Rauch (@rauchg) – ▲ZEIT</li> <li>Dan Zajdband (@impronunciable) – Knight-Mozilla / Coral Project</li> </ul> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1175190325417816064"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Web前端,React)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448111909138432.htm" title="react-intl——react国际化使用方案" target="_blank">react-intl——react国际化使用方案</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> 余生逆风飞翔 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835133874892533760.htm" title="前端使用react-intl-universal进行国际化" target="_blank">前端使用react-intl-universal进行国际化</a> Stephy_Yy <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E7%A0%94/1.htm">调研</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的</div> </li> <li><a href="/article/1835101722159181824.htm" title="VUE实现大小缩放轮播图" target="_blank">VUE实现大小缩放轮播图</a> 书边事. <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.</div> </li> <li><a href="/article/1835089183857799168.htm" title="react里的index.js是怎么跟index.html结合起来的?" target="_blank">react里的index.js是怎么跟index.html结合起来的?</a> SherrinfordL <div>image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf</div> </li> <li><a href="/article/1835085841114951680.htm" title="Taro实现微信小程序自定义拍照截图识别" target="_blank">Taro实现微信小程序自定义拍照截图识别</a> 书边事. <a class="tag" taget="_blank" href="/search/taro/1.htm">taro</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>效果图：代码：>请对准框内拍摄题目重新拍照文件处理中...开始识别definePageConfig({navigationStyle:"custom",navigationBarTitleText:"",//启用页面分享//enableShareAppMessage:true,//启动朋友圈分享//enableShareTimeline:true});import{reactive,toRefs,</div> </li> <li><a href="/article/1835053432449363968.htm" title="（小白入门）Windows环境下搭建React Native Android开发环境" target="_blank">（小白入门）Windows环境下搭建React Native Android开发环境</a> 码农老黑 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/Native/1.htm">Native</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a> <div>ReactNative(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架React在原生移动应用平台的衍生产物，目前支持iOS和Android两大平台。RN的环境搭建在RN的中文社区有所介绍，但是对于小白来说还是有些太过简略了。RN中文社区详见参考，本文不涉及的问题也许在其中能够有所解答。ReactNative思想底层引擎是JavaSc</div> </li> <li><a href="/article/1835005024372092928.htm" title="【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”" target="_blank">【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”</a> coderYYY <a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/bug%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">bug解决方案</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》自从半月前，通义灵码一运行就会报这个错尝试了以下方法，都无法解决：阿里云官方方法：删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可</div> </li> <li><a href="/article/1835004897926410240.htm" title="微信小程序生成小程序转发链接，携带参数跳转到另外一个页面" target="_blank">微信小程序生成小程序转发链接，携带参数跳转到另外一个页面</a> coderYYY <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%95%99%E7%A8%8B%E4%BB%A5%E5%8F%8A%E4%BB%A3%E7%A0%81/1.htm">前端项目教程以及代码</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1/1.htm">微信</a> <div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》✨一、前言需求：在页面A生成分享链接（携带参数），分享到微信聊天后，好友点击链接可跳转到页面B，页面B可获取到参数二、具体实现pageA（生成链接页面）：通过给button组件设置属性</div> </li> <li><a href="/article/1834965176286277632.htm" title="react中如何获取并使用usestate声明的变量的值" target="_blank">react中如何获取并使用usestate声明的变量的值</a> 小华0000 <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.函数式更新当需要根据当前状态来更新状态时，可以使用函数式更新。setState（在类组件中）和setCount（在useState中）都可以接受一个函数作为参数，这个函数接收当前的状态作为参数，并返回新的状态。functionExampleComponent(){const[count,setCount]=useState(0);//使用函数式更新functionhandleClick(){s</div> </li> <li><a href="/article/1834963412711469056.htm" title="【Vue3源码实现】Ref isRef unRef proxyRefs实现" target="_blank">【Vue3源码实现】Ref isRef unRef proxyRefs实现</a> ZhaiMou <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在上篇文章中我们了解了响应式原理，并在最后实现了reactive。上文链接Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但Proxy无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实</div> </li> <li><a href="/article/1834963034653683712.htm" title="React 前端应用结合 Nginx 部署指南及常见错误排查" target="_blank">React 前端应用结合 Nginx 部署指南及常见错误排查</a> 蜗牛去旅行吧 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>在现代Web开发中，React已成为构建用户界面的流行选择，而Nginx则是一个高性能的Web服务器，广泛用于静态文件的托管和负载均衡。在本篇博客中，我们将详细介绍如何将一个React应用部署到Nginx上，并探讨在部署过程中可能遇到的常见错误及其解决方案。部署步骤1.准备React应用首先，确保你已经创建了一个React应用。如果还没有，可以使用CreateReactApp快速生成一个基础项目：</div> </li> <li><a href="/article/1834961772746993664.htm" title="vue3 响应性API" target="_blank">vue3 响应性API</a> weixin_44747590 <a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>toRef可以用来为源响应式对象上的property性创建一个ref。然后可以将ref传递出去，从而保持对其源property的响应式连接。本质类似指针引用。举例：conststate=reactive({foo:1,bar:2})constfooRef=toRef(state,'foo')fooRef.value++console.log(state.foo)//2state.foo++cons</div> </li> <li><a href="/article/1834957860375719936.htm" title="手撸vue3核心源码——响应式原理(isRef和unRef)" target="_blank">手撸vue3核心源码——响应式原理(isRef和unRef)</a> 前端不是渣男 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>今天来实现一下ref的功能函数，isRef与unRefisRefisRef和isReactive一样，都是用于检测数据类型，isRef是检测是不是一个ref对象,跟isReactive函数实现起来一样,我们先来写一个单元测试这里要实现的功能是，检测ref对象肯定就通过返回true，检测普通类型数据以及reactive对象都是falseit("itshouldreturnaboolean",()=></div> </li> <li><a href="/article/1834957104239177728.htm" title="vue3 | isRef、unref、toRef、toRefs" target="_blank">vue3 | isRef、unref、toRef、toRefs</a> 杨贵妃会飞飞飞 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>isRef检查某个值是否是ref。是返回true，否则返回false。constnum=ref(10)constnum1=20constnum2=reactive({data:30})console.log(isRef(num))//trueconsole.log(isRef(num1))//falseconsole.log(isRef(num2))//falseunref()如果参数是ref，则</div> </li> <li><a href="/article/1834953567916617728.htm" title="vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。" target="_blank">vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。</a> chen_sir_sh <a class="tag" taget="_blank" href="/search/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">vue学习笔记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol</div> </li> <li><a href="/article/1834951677422170112.htm" title="React项目的开发前准备以及 JSX 的基本使用" target="_blank">React项目的开发前准备以及 JSX 的基本使用</a> 渡鸦七 <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>React项目的开发前准备以及JSX的基本使用React项目创建create-react-appnpxcreate-react-appmy-appcdmy-appnpmstartyarncreatereact-appyarncreatereact-appmy-appcdmy-appyarnstartcreate-react-app和yarncreatereact-app都可以快速创建一个React</div> </li> <li><a href="/article/1834950166029889536.htm" title="react 函数组件useState异步变同步" target="_blank">react 函数组件useState异步变同步</a> MIKE-zi <a class="tag" taget="_blank" href="/search/react%E5%85%A5%E9%97%A8/1.htm">react入门</a><a class="tag" taget="_blank" href="/search/setstate%E5%BC%82%E6%AD%A5%E9%97%AE%E9%A2%98/1.htm">setstate异步问题</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0%E5%88%86%E9%A1%B5/1.htm">函数组件实现分页</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD/1.htm">函数组件上拉加载</a> <div>需求函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码const[pageNo,setpageNo]=useState(1)constonPullUpRefresh=()=>{console.log("上拉加载内容")console.log("上一次的pageNo",pageNo)setpageNo(page</div> </li> <li><a href="/article/1834844033856401408.htm" title="Netty权威指南：Netty总结-高性能与可靠性" target="_blank">Netty权威指南：Netty总结-高性能与可靠性</a> Ty_1106 <a class="tag" taget="_blank" href="/search/Netty/1.htm">Netty</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a> <div>第二十二章高性能之道22.1RPC调用性能模型分析22.1.1传统RPC调用性能差三宗罪：网络传输采用同步阻塞I/O导致经常性阻塞序列化性能差线程模型问题22.1.2I/O通信性能三要素传输：BIO、NIO或者AIO协议：HTTP公有协议，内部私有协议线程：数据报如何读取，Reactor线程模型22.2Netty高性能之道22.2.1异步非阻塞通信I/O多路复用技术22.2.2高效的Reactor</div> </li> <li><a href="/article/1834835713846243328.htm" title="Vue 和 React 的对比" target="_blank">Vue 和 React 的对比</a> 淘淘是只狗 <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>React和Vue有许多相似之处：使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用PureComponent，</div> </li> <li><a href="/article/1834832435699871744.htm" title="一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！" target="_blank">一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！</a> tabzzz <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>文章目录什么是Redux？它有什么用Redux基本原理Redux在React中具体使用的方法ReduxToolkit（RTK）createSlice函数参数返回值示例configureStore函数参数返回值示例React-ReduxProvider组件示例React组件使用store中的数据useSelector钩子函数示例connect组件mapStateToPropsmapDispatchT</div> </li> <li><a href="/article/1834831738988228608.htm" title="react 更新元素状态" target="_blank">react 更新元素状态</a> 叶绿素yls <div>所有的react元素都是immutable不可变的。当元素被创建之后，我们无法修改他的内容或属性。根据我们现在所学的react的知识，我们要更新元素的内容，我们必须重新渲染这个元素，也就是重新创建这个元素。看一个例子：functiontick(){constelement=Hello,worldItis{newDate().toLocaleString()}.;ReactDOM.render(el</div> </li> <li><a href="/article/1834817300432252928.htm" title="Reactive 编程-Vert.x" target="_blank">Reactive 编程-Vert.x</a> Flying_Fish_Xuan <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Reactive编程与Vert.x：高效异步Java微服务框架一、什么是Reactive编程？Reactive编程是一种异步编程范式，专注于数据流和事件的传播处理。与传统的阻塞式编程不同，Reactive编程能够更好地处理高并发和异步操作，特别适合实时系统、流处理以及需要快速响应的场景。Reactive编程的核心原则包括：响应性（Responsive）：系统能够快速响应用户请求，并保持低延迟。弹性</div> </li> <li><a href="/article/1834793357197537280.htm" title="生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念" target="_blank">生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念</a> NewmanEdwarda2 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要</div> </li> <li><a href="/article/1834722761373741056.htm" title="react native ScrollView实现滑动锚定，滑动到指定位置" target="_blank">react native ScrollView实现滑动锚定，滑动到指定位置</a> 君君yui <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>实现ScrollView滑动视图组件滑动到指定位置，实现tab与具体位置相锚定给需要锚定的组件加上onLayout属性//event.nativeEvent.layout.x是水平方向值，event.nativeEvent.layout.y是数值方向值//this.layoutList用于存储组件位置onLayout={(event)=>{this.layoutList.push(event.na</div> </li> <li><a href="/article/30.htm" title="Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor" target="_blank">Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor</a> yangshangchuan <a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E6%8A%BD%E5%8F%96/1.htm">信息抽取</a><a class="tag" taget="_blank" href="/search/HtmlExtractor/1.htm">HtmlExtractor</a><a class="tag" taget="_blank" href="/search/%E7%B2%BE%E5%87%86%E6%8A%BD%E5%8F%96/1.htm">精准抽取</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E9%87%87%E9%9B%86/1.htm">信息采集</a> <div>HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。 HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。如</div> </li> <li><a href="/article/157.htm" title="java编程思想 -- 多态" target="_blank">java编程思想 -- 多态</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E6%80%81%E8%AF%A6%E8%A7%A3/1.htm">多态详解</a> <div>一: 向上转型和向下转型面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =</div> </li> <li><a href="/article/284.htm" title="[自动数据处理]稳扎稳打,逐步形成自有ADP系统体系" target="_blank">[自动数据处理]稳扎稳打,逐步形成自有ADP系统体系</a> comsci <a class="tag" taget="_blank" href="/search/dp/1.htm">dp</a> <div> 对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长.... 首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的</div> </li> <li><a href="/article/411.htm" title="storm 自定义日志文件" target="_blank">storm 自定义日志文件</a> 商人shang <a class="tag" taget="_blank" href="/search/storm/1.htm">storm</a><a class="tag" taget="_blank" href="/search/cluster/1.htm">cluster</a><a class="tag" taget="_blank" href="/search/logback/1.htm">logback</a> <div>Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输</div> </li> <li><a href="/article/538.htm" title="Extjs3 SpringMVC使用 @RequestBody 标签问题记录" target="_blank">Extjs3 SpringMVC使用 @RequestBody 标签问题记录</a> 21jhf <div>springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下：（由于使用了父类aaa</div> </li> <li><a href="/article/665.htm" title="一些排错方法" target="_blank">一些排错方法</a> 文强chu <a class="tag" taget="_blank" href="/search/%E6%96%B9%E6%B3%95/1.htm">方法</a> <div>1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o</div> </li> <li><a href="/article/792.htm" title="Swing中文件恢复我觉得很难" target="_blank">Swing中文件恢复我觉得很难</a> 小桔子 <a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a> <div> 我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，</div> </li> <li><a href="/article/919.htm" title="php 文件操作" target="_blank">php 文件操作</a> aichenglong <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6/1.htm">读取文件</a><a class="tag" taget="_blank" href="/search/%E5%86%99%E5%85%A5%E6%96%87%E4%BB%B6/1.htm">写入文件</a> <div>1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."</div> </li> <li><a href="/article/1046.htm" title="MySQL的btree索引和hash索引的区别" target="_blank">MySQL的btree索引和hash索引的区别</a> AILIKES <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>Hash 索引结构的特殊性，其检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢</div> </li> <li><a href="/article/1173.htm" title="JAVA的抽象--- 接口 --实现" target="_blank">JAVA的抽象--- 接口 --实现</a> 百合不是茶 <div>抽象接口实现接口 //抽象类 ,方法 //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体抽象的定义使用abstract abstract class A 定义一个抽象类例如： //定义一个基类 public abstract class A{ //抽象类不能用来实例化，只能用来继承 //</div> </li> <li><a href="/article/1300.htm" title="JS变量作用域实例" target="_blank">JS变量作用域实例</a> bijian1013 <a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a> <div><script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b); </div> </li> <li><a href="/article/1427.htm" title="TDD实践（二）" target="_blank">TDD实践（二）</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a> <div>实践题目：分解质因数 Step1：单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.</div> </li> <li><a href="/article/1554.htm" title="[MongoDB学习笔记一]MongoDB主从复制" target="_blank">[MongoDB学习笔记一]MongoDB主从复制</a> bit1129 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。本文介绍MongoDB的主从复制模式，需要指明</div> </li> <li><a href="/article/1681.htm" title="【HBase五】Java API操作HBase" target="_blank">【HBase五】Java API操作HBase</a> bit1129 <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha</div> </li> <li><a href="/article/1808.htm" title="python调用zabbix api接口实时展示数据" target="_blank">python调用zabbix api接口实时展示数据</a> ronin47 <div>zabbix api接口来进行展示。经过思考之后，计划获取如下内容： 1、获得认证密钥 2、获取zabbix所有的主机组 3、获取单个组下的所有主机 4、获取某个主机下的所有监控项 </div> </li> <li><a href="/article/1935.htm" title="jsp取得绝对路径" target="_blank">jsp取得绝对路径</a> byalias <a class="tag" taget="_blank" href="/search/%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84/1.htm">绝对路径</a> <div>在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下：一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。 </div> </li> <li><a href="/article/2062.htm" title="Java定时任务调度：用ExecutorService取代Timer" target="_blank">Java定时任务调度：用ExecutorService取代Timer</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是：如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被</div> </li> <li><a href="/article/2189.htm" title="SQL 优化原则" target="_blank">SQL 优化原则</a> chicony <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div> 一、问题的提出　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统</div> </li> <li><a href="/article/2316.htm" title="java 线程弹球小游戏" target="_blank">java 线程弹球小游戏</a> CrazyMizzz <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a> <div>最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse</div> </li> <li><a href="/article/2443.htm" title="hadoop jps出现process information unavailable提示解决办法" target="_blank">hadoop jps出现process information unavailable提示解决办法</a> daizj <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/jps/1.htm">jps</a> <div>hadoop jps出现process information unavailable提示解决办法 jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 -- </div> </li> <li><a href="/article/2570.htm" title="PHP图片水印缩放类实现" target="_blank">PHP图片水印缩放类实现</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div> <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos</div> </li> <li><a href="/article/2697.htm" title="IOS控件学习：UILabel常用属性与用法" target="_blank">IOS控件学习：UILabel常用属性与用法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/UILabel/1.htm">UILabel</a> <div>参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281</div> </li> <li><a href="/article/2824.htm" title="完全手动建立maven骨架" target="_blank">完全手动建立maven骨架</a> eksliang <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>建一个 JAVA 项目： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a</div> </li> <li><a href="/article/2951.htm" title="配置清单" target="_blank">配置清单</a> gengzg <a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a> <div>1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm</div> </li> <li><a href="/article/3078.htm" title="Windows端口被占用处理方法" target="_blank">Windows端口被占用处理方法</a> huqiji <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等. 这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&</div> </li> <li><a href="/article/3205.htm" title="开源ckplayer 网页播放器，跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！" target="_blank">开源ckplayer 网页播放器，跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！</a> 天梯梦 <a class="tag" taget="_blank" href="/search/mobile/1.htm">mobile</a> <div>CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，</div> </li> <li><a href="/article/3332.htm" title="简单工厂设计模式" target="_blank">简单工厂设计模式</a> hm4123660 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%8E%82%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">工厂设计模式</a><a class="tag" taget="_blank" href="/search/%E7%AE%80%E5%8D%95%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F/1.htm">简单工厂模式</a> <div> 简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。 </div> </li> <li><a href="/article/3459.htm" title="maven笔记" target="_blank">maven笔记</a> zhb8015 <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。指定测试类 mvn test</div> </li> <li><a href="/article/3586.htm" title="非mapreduce生成Hfile，然后导入hbase当中" target="_blank">非mapreduce生成Hfile，然后导入hbase当中</a> Stark_Summer <a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a><a class="tag" taget="_blank" href="/search/reduce/1.htm">reduce</a><a class="tag" taget="_blank" href="/search/Hfile/1.htm">Hfile</a><a class="tag" taget="_blank" href="/search/path%E5%AE%9E%E4%BE%8B/1.htm">path实例</a> <div>最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile</div> </li> <li><a href="/article/3713.htm" title="jsp web tomcat 编码问题" target="_blank">jsp web tomcat 编码问题</a> 王新春 <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/pageEncode/1.htm">pageEncode</a> <div>今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

Next.js v4.1.4 文档中文翻译

如何使用

安装

代码自动分割

CSS

嵌入式样式 Built-in-CSS

内联式样式 CSS-in-JS

静态文件服务

自定义 头部元素

自定义头部元素