React next 采坑攻略

发表于 | 分类于

最近终于完成了next架构的搭建，高度自定义，集成了dva、scss、antd。终于可以开始编写组件了。

主要是为了前后台同时用React写，组件复用。前台需要SEO的可以服务器渲染生成，后台搞成纯SPA应用

由于我个人极其不爽在jsx里写一大堆css，逻辑混乱，不支持各种高级特性。所以参考官网实例搞了好久。

同时支持css-in-js和scss内部注入组件。dva状态管理。

英语不好真的是硬伤啊，效率太低…

1. scss 全局配置：

next.config.js

const path = require("path");
const glob = require("glob");
module.exports = {
    webpack: (config, { dev }) => {
        config.module.rules.push(
            {
                test: /\.(css|scss)/,
                loader: "emit-file-loader",
                options: {
                    name: "dist/[path][name].[ext]"
                }
            },
            {
                test: /\.css$/,
                use: ["babel-loader", "raw-loader", "postcss-loader"]
            },
            {
                test: /\.s(a|c)ss$/,
                use: [
                    "babel-loader",
                    "raw-loader",
                    "postcss-loader",
                    {
                        loader: "sass-loader",
                        options: {
                            includePaths: ["styles", "node_modules"]
                                .map(d => path.join(__dirname, d))
                                .map(g => glob.sync(g))
                                .reduce((a, c) => a.concat(c), [])
                        }
                    }
                ]
            }
        );
        return config;
    }
};

pages/index.js 内部组件注入

import Stylesheet from "styles/index.scss";
...
<style dangerouslySetInnerHTML={{ __html: Stylesheet }} />

2. webpack编译警告，消除

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
...

翻译

有多个模块名称仅仅大小写不同
这会导致在文件系统中产生一些不是预期的行为
使用唯一的写法

就是有一些模块名称相似，需要修改成不一样的。

3. 杂食堆

git 打分支

git branch -b “zhaihaoran”
会创建一个zhaihaoran的分支

git branch 可以查看所有分支信息

提交的时候，git push origin zhaihaoran
就可以在分支上进行提交

去除react-router的_k 参数

因为默认router是由hashHistory实现，由锚点实现，因为锚点不会导致页面跳转。因为 url 中 # 符号的存在，从 /#/ 到 /#/user/haishanh 浏览器并不会去发送一次 request
目的主要是为了兼容低版本浏览器。

去除的话可以改为现代浏览器的browserHistory，但是需要服务器端配合。

名词
  • ssr (Server Side Render) 服务器渲染
  • csr (Client Side Render) 客户端渲染
  • GPU、CPU、APU (声音处理器)
    通过PCI/AGP/PCIE总线交换数据。GPU在浮点运算、并行计算等部分计算方面，明显高于CPU的性能
English
  • boilerplate 样板
  • insights 洞察
  • mutated 突变
  • can`t be reasigned 重新分配
  • traversal 遍历
JS动画比css快！

http://www.oschina.net/translate/css-js-animation

0%