Next.js 4: React 16 and styled-j
2017-12-06 本文已影响31人
小纠结在简书
我们很高兴推出Next.js 4，它支持React 16，并引入了默认样式引擎styled-jsx的主要升级，支持动态样式。
引入了主要的性能改进：使用Next.js 4的SSR 速度提高了2.6倍，样式初始化速度提高了20％。根据CSS-in-JS基准，Next.js样式现在是任何库中最快的。
React 16
React 16引入了许多改进，更新依赖：
npm i next@latest react@latest react-dom@latest
使用Next.js 3.0，我们可以在我们的一个模型页面上每秒获得约105个请求：
基于Next.js 3.0 SSR的5000个请求的基准
和每秒272个请求与Next.js 4 React 16（一个2.6倍的改善！）
于对Next.js 4 SSR的5000个请求的基准。快2.6倍！
这使应对那些我们结合使用Next.js时所观察到的服务器渲染性能相似的水平与preact。
Styled-jsx 2
styled-jsx是一个babel插件，用于添加对React组件中的样式的支持。这有效地使您能够使用具有范围和隔离的CSS的单个文件组件：
export default () => (
<div>
Hello there <span>my friend</span>
<style jsx>{`
/* this style only applies to the span within lexical scope */
span { color: red; }
`}</style>
</div>
)
CSS可以和你的JSX一起嵌入。它就能起作用！
直到今天，还支持在您的样式中嵌入常量，这对于适用于您的CSS的各种配置很有帮助：
import {COLOR} from './css-config';
export default () => (
<div>
Hello there <span>my friend</span>
<style jsx>{`
/* this style only applies to the span within lexical scope */
span { color: ${COLOR}; }
`}</style>
</div>
)
在这种情况下，COLOR是1.x中支持的常量
至于带有Next.js 4的带风格的jsx 2，你现在可以从范围内嵌入变量和表达式，它们可以来自组件道具或状态。
export default ({ color }) => (
<div>
Hello there <span>my friend</span>
<style jsx>{`
/* this style only applies to the span within lexical scope */
span { color: ${color}; }
`}</style>
</div>
)
在这种情况下，color是一个React 属性，可以随时间变化！
这样可以减少内联样式与静态样式结合使用的需要，这会在读取组件代码时造成一些混淆。它还改进了用于
动画和主题等用例的样式-jsx。
style-jsx 2包含显着的性能改进。与静态样式一起使用时，它是在应用程序中使用样式的最快方式。使用动态样式时，它是最快的（只有在将来才会变得更快！）
完整的发行注记
微小的变化
- 将导航视为散列哈希导航
- 通过conf导出功能
- 保留一些缓冲页面，不会被丢弃。
- 添加webpack-bundle-size-analyzer
- 将文档添加到onDemandEntries配置
- 使用-firebase托管示例更新
- 允许在exportPathMap中使用文件名
- 为babel-preset-env + babel-plugin-transform-runtime配置opts
补丁
- 自述文件改进
- 更新hash-statics示例以支持子目录
- 示例：改进ReasonML
- 添加了Fastify
- 更优雅的应用antd
- 升级依赖关系
- 修正了preact和inferno的依赖关系
- 修复代码片段的编码风格
- 将页面可见性api绑定到需求pinger
- 只使用严格的依赖关系
- 修复server / export.js中的错误消息
- 公开buildId自定义webpack配置
- 新增了PropType
- 将“asPath”信息添加到url对象
