react服务端渲染: markdown



# npm publish: react component/react hook component

 [![npm](https://img.shields.io/npm/v/npm-publish-react-component)](https://www.npmjs.com/package/npm-publish-react-componentr) [![npm](https://img.shields.io/npm/l/npm-publish-react-component)](https://www.npmjs.com/package/npm-publish-react-component) ![react supported](https://img.shields.io/badge/React-%5E16.8.0-blue.svg)

已经成功发布 [react 天气组件](https://www.npmjs.com/package/react-tencent-weather) , 以及  [npm publis react demo ](https://www.npmjs.com/package/npm-publish-react-component) 简单实例，此文就是基于此demo

完整代码已经发到 Github:  [https://github.com/douyacun/npm-publish-react-component](https://github.com/douyacun/npm-publish-react-component) 

误区：

1. npm 发布的react包是源码还是编译后的代码？ 编译后的代码
2. npm 如何在本地测试已经打包的代码？npm link, 这个后续详细讲
3. npm 打包以后 css 文件如何处理？webpack配置，js文件和css文件打包到一个文件
4. npm 发布的react包如何支持服务端渲染？css单独打包，import

概要：

1. package.json 配置
2. webpack 配置, 支持服务端渲染
3. [npm](https://www.npmjs.com/package/npm-publish-react-component)  账号，npm link，npm publish，
4. ISSUE

体验:

```bash
git clone https://github.com/douyacun/npm-publish-react-component.git
npm install
npm start
```

目录：

```
.
├── LICENSE
├── babel.config.json
├── example
│   ├── index.html
│   ├── index.js
│   └── webpack.config.js
├── lib
│   ├── index.js
│   └── index.js.LICENSE.txt
├── package.json
├── src
│   ├── index.css
│   └── index.js
└── webpack.config.js
```



# package.json 配置

1. git init初始化，指定origin仓库，接下来npm会帮忙初始化号git相关的字段

2. `npm init` 初始化 package.json，里面的信息都填写一下，这是搜到这个包的关键，尤其是是keywords

3. 安装一下react打包需要的插件, react/babel/webpack

```
npm install react react-dom --save
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev
npm install webpack webpack-cli webpack-dev-server --save-dev
```

4. bable配置文件 `babel.config.json`

```json
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
```

完整 的 `package.json` 

```json
{
  "name": "npm-publish-react-component", // 重要! npm install <?> 包名，全局唯一
  "version": "1.0.0", // 版本号，每次发布累加一
  "description": "npm发包流程", // seo 三剑客
  "main": "lib/index.js",// 重要！import Demo from "npm-publish-react-component" 就是引入main指定的文件～
  "keywords": [
    "npm publish",
    "npm发布",
    "react组件",
    "react component"
  ],// seo 三剑客
  "scripts": {
    "start": "webpack serve --config example/webpack.config.js",
    "build": "webpack"
  },
  "author": "douyacun",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "directories": {
    "example": "example",
    "lib": "lib"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/douyacun/npm-publish-react-component.git"
  },
  "bugs": {
    "url": "https://github.com/douyacun/npm-publish-react-component/issues"
  },
  "homepage": "https://github.com/douyacun/npm-publish-react-component#readme"
}

```

- dependencies 会在npm install <your package>时自动安装
- devDependencies 本地安装时需要用到，打包用的肯定放在devDependencies里面
- peerDependencies 重要！我是用 react hook 写的组件，是react 16.8.4里提供的功能，这里react必须要大于16.8.4的版本

# webpack 配置

1. 配置入口文件 

```
entry: './src/index.js', // 打包哪个文件
```

2. 配置输出目录，文件名，这个要对应到 `package.json`  **main** 文件

```
output: {
    path: path.join(__dirname, '../lib/'), // 输出到哪
    filename: 'index.js', // 输出的文件名字
    libraryTarget: 'umd', // 重要！
}
"main": "lib/index.js"
```

3. `libraryTarget` :  很重要，意味着我们打包出来的js文件可以在什么环境使用～ <a name="libraryTarget"></a>

这里罗列一下各个选项的含义：

- var [默认]:  分配给一个变量值

```js
var MyLibrary = _entry_return_;
// 在一个单独的 script……
MyLibrary.doSomething();
```

- this： 分配给this变量

```
this["MyLibrary"] = _entry_return_;

// 在一个单独的 script……
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // 如果 this 是 window
```

- window： 当 library 加载完成，入口起点的返回值将分配给 window 对象。

```js
window["MyLibrary"] = _entry_return_;

window.MyLibrary.doSomething();
```

- golbal: 分配给 `global` 对象的这个属性下。一般用在node环境中

```js
global["MyLibrary"] = _entry_return_;

global.MyLibrary.doSomething();
```

- commonjs： 分配给 exports 对象。这个名称也意味着，模块用于 CommonJS 环境：这是我们需要的～～～

```js
exports["MyLibrary"] = _entry_return_;

require("MyLibrary").doSomething();
```

- amd：必须是支持define/require的环境引入

```js
define([], function() {
  return _entry_return_; // 此模块返回值，是入口 chunk 返回的值
});
```

- umd：混编，支持 commonJs/global/amd的环境: 这是我们需要的～～～

```
(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else {
    var a = factory();
    for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_; // 此模块返回值，是入口 chunk 返回的值
});
```

4. react/css 编译规则

完整 `webpack.config.json`

```js
const path = require('path');

module.exports = {
    entry: './src/index.js', // 打包哪个文件
    output: {
        path: path.join(__dirname, '../lib/'), // 输出到哪
        filename: 'index.js', // 输出的文件名字
        libraryTarget: 'commonjs2', // 重要！
    },
    externals: { // 重要！Minified React error #321 https://github.com/facebook/react/issues/16029
        react: {
            commonjs: 'react',
            commonjs2: 'react',
            amd: 'react',
            root: 'React',
        },
        'react-dom': {
            commonjs: 'react-dom',
            commonjs2: 'react-dom',
            amd: 'react-dom',
            root: 'ReactDOM',
        },
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"] // style-loader 会把css与js文件打包在一个文件中
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            }
        ]
    },
    performance: {
        hints: "warning", // 枚举
        hints: "error", // 性能提示中抛出错误
        hints: false, // 关闭性能提示
        maxAssetSize: 200000, // 整数类型（以字节为单位）
        maxEntrypointSize: 400000, // 整数类型（以字节为单位）
        assetFilter: function (assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    }
}
```

服务端渲染:

```js
const path = require('path');
const TerserJSPlugin = require('terser-webpack-plugin');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    output: {
        path: path.join(__dirname, '../lib/ssr/'),
        filename: 'index.js',
        libraryTarget: 'commonjs2',
    },
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
    plugins: [new ExtractCssChunks({filename: 'index.css',})],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ExtractCssChunks.loader, "css-loader"]
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            }
        ]
    }
}
```

其他配置复用上面的配置，使用了2个插件将css单独出一个文件出来，否则服务端渲染时会报：`document is not defined`,

- ExtractCssChunks
- OptimizeCSSAssetsPlugin

这样引入组件时就需要单独引入js文件和css文件：

```js
import React from 'react';
import ReactDOM from 'react-dom';
import Weather from 'react-tencent-weather/lib/ssr/index.js';
import 'react-tencent-weather/lib/ssr/index.css';

ReactDOM.render(
    <div><Weather province="上海" city="上海" /></div>,
    document.getElementById('root')
)
```



# [npm](https://www.npmjs.com/)  账号，npm link，npm publish，

**1. 注册npm账号**

去 [https://www.npmjs.com/](https://www.npmjs.com/) 注册一个账号就ok了

- 在项目目录下 npm login
- 输入 Username/Password/Email: (this IS public)

在此注意！： npm是否使用淘宝或其他镜像代理

```bash
npm config list
```

如果使用了的话，注视掉

```bash
vim .npmrc

//registry=https://registry.npm.taobao.org/
```

使用npm build打包一下出来js文件，npm包发布的是webpack babel编译后的文件～

```js
npm build
```

打包完成后肯定要测试一下的对吧

**2. 本地测试打包文件 npm link**

`npm link` 会把当前目录 软链 到全局路径下

```bash
➜  npm-publish-react-component git:(master) ✗ npm link
npm notice created a lockfile as package-lock.json. You should commit this file.
removed 262 packages in 3.534s

52 packages are looking for funding
  run `npm fund` for details

/Users/liuning/.nvm/versions/node/v12.19.0/lib/node_modules/npm-publish-react-component -> /Users/liuning/Documents/github/npm-publish-react-component
```

 `npm link npm-publish-react-component` 将 全局路径下的 `npm-publish-react-component` 包软链到当前目录下的 `node_modules` <a name="link"></a>

```bash
➜  npm-publish-react-component git:(master) ✗ npm link npm-publish-react-component
/Users/liuning/Documents/github/npm-publish-react-component/node_modules/npm-publish-react-component -> /Users/liuning/.nvm/versions/node/v12.19.0/lib/node_modules/npm-publish-react-component -> /Users/liuning/Documents/github/npm-publish-react-component
```

我们就可以直接在example/index.js中直接import使用

```react
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from 'npm-publish-react-component';

ReactDOM.render(
    <div><Demo name="douyacun"/></div>,
    document.getElementById('root')
)
```

删除 `package-lock.json`  `npm start` 要确保 使用的webpack使用的配置文件是测试的配置，最好区分 测试/正式 环境



# ISSUE

**1. 引入包报错: `React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.`**

```
react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
```

这个就是webpack没有指定:  `libraryTarget` 导致，[详细在看一下上面我们罗列的选项](#libraryTarget)



**2. 引入包报错：`Uncaught ReferenceError: module is not defined`**

```js
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from 'douyacun-react-demo';

ReactDOM.render(
    <div><Demo name="douyacun"/></div>,
    document.getElementById('root')
)
```

报错：

![module is not defined](/images/blog/1/react/assert/image-20210109163631455.png)

1. 这里是因为package.json没有定义 main 入口文件，import 不知道默认引入哪个文件
2. example 本地测试环境配置的测试环境，没有入口文件，确认是否指向 example/index.js。



**3. npm run build 报错 Cannot find module 'pkg-dir'**

这个是因为:  npm link 在 node_module [创建软链导致的](#link)

解决方案：

```
npm install
```



**4. import react组件时报错：Uncaught Error: Minified React error #321**

如果react组件中使用了hook，useState/useEffect 就会导致这个问题，react官方给出的解决方案：[https://github.com/facebook/react/issues/16029](https://github.com/facebook/react/issues/16029)

原因是因为两次引入了react

```
➜  npm-publish-react-component git:(master) ✗ npm run build

> npm-publish-react-component@1.0.0 build /Users/liuning/Documents/github/npm-publish-react-component
> webpack

{ javascriptModule: false }
asset index.js 8.28 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 931 bytes 4 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 19.6 KiB
  modules by path ./node_modules/ 16.8 KiB
    modules by path ./node_modules/react/ 6.48 KiB
      ./node_modules/react/index.js 190 bytes [built] [code generated]
      ./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]    <----- 这里将 react 也打包进去了～
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
  modules by path ./src/ 2.85 KiB
    ./src/index.js + 1 modules 2.49 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/index.css 368 bytes [built] [code generated]
webpack 5.12.2 compiled successfully in 1092 ms
```

解决方法：

```json
externals: { // 重要！Minified React error #321 https://github.com/facebook/react/issues/16029
  react: {
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'react',
    root: 'React',
  },
  'react-dom': {
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'react-dom',
    root: 'ReactDOM',
  },
}
```





为了发布一个react npm package，在此默默的抹了2把泪～

npm publish: react component/react hook component


 @hustcc react-adsense  不支持服务端渲染框架，受 [react-adsense](https://www.npmjs.com/package/react-adsense) 启发写了 react-ssr-adsense

# react-ssr-adsense

react-ssr-adsense is a React-ssr-component for Google AdSense。support [#nextjs](https://nextjs.org/)

[![npm](https://img.shields.io/npm/v/react-ssr-adsense.svg)](https://www.npmjs.com/package/react-ssr-adsense)
[![npm](https://img.shields.io/npm/dm/react-ssr-adsense.svg)](https://www.npmjs.com/package/react-ssr-adsense)
[![npm](https://img.shields.io/npm/l/react-ssr-adsense.svg)](https://www.npmjs.com/package/react-ssr-adsense)

# 1. Install

> **npm install --save react-ssr-adsense**

Before use Google AdSense, you should add the `script` at the end of HTML.

```html
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
```


# 2. Usage

```jsx
import React from 'react';
import AdSense from 'react-ssr-adsense';

// ads with no set-up
<AdSense
  client='ca-pub-7292810486004926'
  slot='7806394673'
/>

// ads with custom format
<AdSense
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ width: 500, height: 300, float: 'left' }}
  format=''
/>

// responsive and native ads
<AdSense
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  layout='in-article'
  format='fluid'
/>

// auto full width responsive ads
<AdSense
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  format='auto'
  responsive='true'
  layoutKey='-gw-1+2a-9x+5c'
/>
```


# 3. Props

 - Required props:
   - `client`
   - `slot`
 - Optional props:
   - `className`:
   - `style`:
   - `layout`:
   - `layoutKey`:
   - `format`:
   - `responsive`:


# LICENSE

MIT@[douyacun](https://github.com/douyacun).





昨天成功将google adsense申请下来了，博客时nextjs服务端渲染框架，使用react-adsense不支持服务端渲染，解决以后出了一个react-ssr-adsense

react接入google广告: 支持服务端渲染


## react天气组件

 [![npm](https://img.shields.io/npm/v/react-tencent-weather)](https://www.npmjs.com/package/react-tencent-weather) [![npm](https://img.shields.io/npm/dm/react-tencent-weather)](https://www.npmjs.com/package/react-tencent-weather) [![npm](https://img.shields.io/npm/l/react-tencent-weather)](https://www.npmjs.com/package/react-tencent-weather) ![echarts supported](https://img.shields.io/badge/echarts-%5E3.0.0%20%7C%7C%20%5E4.0.0-blue.svg) ![react supported](https://img.shields.io/badge/React-%5E16.8.0-blue.svg)

体验地址: [https://www.douyacun.com](https://www.douyacun.com)

文档：[https://www.douyacun.com/article/b9093956c565e471f45c035b5870ed0c](https://www.douyacun.com/article/b9093956c565e471f45c035b5870ed0c)

特点：

1. 使用腾讯天气接口: `https://wis.qq.com/weather/common?source=pc&weather_type=forecast_1h|forecast_24h|alarm|limit|tips|rise|observe|index&province=${province}&city=${city}&county=`
2. 支持：逐小时预报/7日天气预报/生活指数
3. 支持IP定位，使用[免费IP定位接口](https://www.douyacun.com/article/a57b58a343f051cf1fb9761a31d37693)
4. 支持服务端渲染

![react腾讯天气组件](/images/blog/1/react/assert/image-20210107225932253.png)
![react腾讯天气组件](/images/blog/1/react/assert/image-20210107230116155.png)


## install

```bash
npm install react_tencent_weather --save
```

运行demo:

```bash
git clone https://github.com/douyacun/react-tencent-weather.git

npm install

npm start
```

本地浏览器打开 [http://127.0.0.1:3000](http://127.0.0.1:3000)

## usage

客户端使用

```react
import React from 'react';
import ReactDOM from 'react-dom';
import Weather from 'react-tencent-weather';

ReactDOM.render(
    <div><Weather province="上海" city="上海" /></div>,
    document.getElementById('root')
)
```

服务端渲染

```react
import React from 'react';
import ReactDOM from 'react-dom';
import Weather from 'react-tencent-weather/lib/ssr/index.js';
import 'react-tencent-weather/lib/ssr/index.css';

ReactDOM.render(
    <div><Weather province="上海" city="上海" /></div>,
    document.getElementById('root')
)
```

## component props

- `province`: (optional, string)

省份，默认上海

- `city`: (optional, string)

城市，默认上海

- `showDays` : (optional, bool)

是否显示 7日天气预报

- `showHours`: (optional, bool)

是否显示 逐小时预报

- `showLiving`: (optional, bool)

是否显示 生活指数

- `showTomorrow`:  (optional, bool)

是否显示明日预报

# LICENSE

MIT@[douyacun](https://github.com/douyacun)

关注我的微信公众号

![douyacun](/images/blog/1/react/assert/douyacun_qrcode.jpg)


博客右边框空荡荡的，需要一个天气组件来支撑一下，就写了这个天气组件～

react天气组件: 腾讯天气


react 服务端渲染 cookie 有2个问题：

1. [服务端执行的代码如何拿到cookie并解析透穿给后端接口，后端又如何设置cookie？](#服务端cookie透传)
2. [浏览器执行的代码如何读取cookie？](#客户端读取cookie)



# 服务端cookie透传

明白next的渲染流程很重要：

浏览器打开页面 -> node服务请求后端接口 -> node服务渲染页面 并响应



node服务透传cookie给后端接口：此时cookie只能从request中取的cookie:  [nextjs文档](https://nextjs.org/docs/api-reference/data-fetching/getInitialProps)

```react
Article.getInitialProps = async ({ req, query }) => {
    // 文章详情
    const { article, statusCode, errMessage } = await GET({
        url: `/api/article/${id}`,
        headers: {
            Cookie: req.headers.cookie
        }
    }).then(resp => {
        return {article: resp.data, statusCode: resp.code, errMessage: resp.message}
    })
    return { article: article, statusCode: statusCode, errMessage: errMessage }
}
```



后端设置cookie：

- 如果是node服务请求的后端接口，此时的node服务就相当于nginx一样的代理请求，需要将响应的cookie透传给浏览器

```react
import React from "react";
import {GET} from '../src/request';

function Demo ({data}) {
    return (
        <div>
            {data}
        </div>
    )
}

Demo.getInitialProps = async ({ req, query, res }) => {
    let cookie;
    const {data, code, message} = await GET({url: "http://douyacun.io/api/helper/demo", noCheck: true}).
    then((resp) => {
        res.setHeader("set-cookie", resp.headers["set-cookie"]);
        return resp.data
    }).
    then((data) => {
        return data
    })
    return {data: data}
}

export default Demo
```

GET 是封装的 axios，axios 的response不是node原生的 [response](https://github.com/axios/axios#response-schema)，而nextjs的res是node原生的[response](https://nodejs.org/api/http.html#http_class_http_serverresponse)，这里需要注意一下使用的请求库

**重点是：明白node服务渲染，其实是一层代理服务**

- 如果是浏览器客户端请求的后端接口，response是可以直接被浏览器读取到的，就不需要我们做什么事情了。



# 客户端读取cookie

客户端请求接口会有2个cookie问题：

1. 跨域请求携带cookie
2. 如何读取并解析cookie

### 跨域请求携带cookie

原理是一致的，先header请求服务端，验证服务端是否支持跨域，以及支持的域名：

```http
Access-Control-Allow-Origin: https://www.douyacun.com
```

> 这里一定要明确指定域名，否则请求还是无法携带cookie的

axios 需要指定：

```http
withCredentials: true
```



### 浏览器读取并解析cookie

用户信息存cookie的原因是不安全，也不建议的。当然前提用户信息存在隐私数据，解决方案是存在session中，cookie只是存session id。

我的博客cookie只存 昵称和ID。如何确保cookie不被篡改呢？cookie，对数据进行签名，签名使用的key是存储在服务端里。如果有更高的安全需求的，请移步～

重点：**react服务端渲染，cookie是存在浏览器上的，确保代码是在浏览器客户端上执行的才能读取到对吧**

```react
import React from 'react';
import { parseCookies } from 'nookies'

function Demo() {
    const [user, setUser] = React.useState({})
    // 首次加载
    React.useEffect(() => {
        const all = parseCookies();
        if (all.douyacun) {
            setUser(JSON.parse(all.douyacun));
        }
    }, [])
  return (<div>Hello {user.name}.</div>)
}

export default demo
```

[React.useEffect的用法](https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect), 需要注意的是:

> 默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它 [在只有某些值改变的时候](https://zh-hans.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect) 才执行。
>
> 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（`[]`）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行，解析cookie只需要一次就够了～



nextjs getInitialProps 是在服务端执行的代码，可以通过 request.header 获取到 cookie 透传给后端接口

react服务端渲染: cookie如何透传给后端，后端如何设置cookie


[TOC]

# 左右布局

定义父框`root`  左视图 `left`，点击移动区 `resizer`，右试图 `right`，建议使用flex布局

![image-20201228233232732](/images/blog/1/react/assert/image-20201228233232732.png)

```css
root: {
  	height: "100%",
  	width: "100%",
}
left: {
    width: "70%"
},
resizer: {
  	userSelect: "none",
    display: "flex",
    backgroundColor: "#fafbfd",
    width: 14,
    cursor: "ew-resize",
    alignItems: "center",
    justifyContent: "center",
    border: "0.5px solid rgba(0, 0, 0, 0.07)",
},
right: {
  	width: "30%",
}
```

```html
<div className={classes.root} onMouseMove={mouseMoveHandler}>
  <div className={classes.left} style={{ width: leftWidth + "%", userSelect: userSelect }} ref={leftRef}>
		左
  </div>
  <div className={classes.resizer} onMouseDown={mousedownHandler}>︙</div>
  <div className={classes.right} style={{ width: rightWidth + "%" }}>
		右
  </div>
</div>
```

`resizer` 鼠标悬浮时一定是这个样式  <--> 的

如何实现左右移动呢？

1. 只有在`resizer` 区域内鼠标左键按下时，才可以左右移动
2. 鼠标左键抬起时，结束左右移动
3. 左视图宽度，鼠标移动时： [left.width = e.clientX / screen.width * 100] 鼠标x轴 -> 浏览器左边 的距离/窗口的宽度  * 100% 就是 `left` 的百分比
4. 右视图宽度，[right.width = 100 - left.width - resizer.width/screen.width] 窗口宽度 - 左视图宽度 - 移动区宽度 = 右视图宽度



### resizer 订阅 `mouseDown`

在resizer按下鼠标时，才可以左右移动，加锁:

```react
const [canMove, setCanMove] = React.useState(false) // 聊天框：是否移动
```

 `mouseDown`时，容易选中左右的文字体验感很差, 避免鼠标按下时选中文字，加锁：

```react
const [userSelect, setUserSelect] = React.useState("text")
```

处理函数:

```react
// 聊天框：开启移动
const mousedownHandler = (e) => {
  setCanMove(true)
  setUserSelect("none");
}
```

### document 订阅 `mouseup`

只能在document上订阅，不能确定最后鼠标的位置是在哪个元素上

```react
// 订阅聊天框宽度
React.useEffect(() => {
  document.addEventListener("mouseup", mouseUpHandler);
  return () => {
    document.removeEventListener("mouseup", mouseUpHandler);
  }
}, [])
```

首先`React.useEffect`,第二个参数空代表，不管state如何变化，此函数只会加载一次，类似init state。返回闭包组件卸载时执行移除document.onMouseUp的订阅

鼠标抬起后本次调整结束，持久化当前边框位置，下次再进来就不需要重新调整了:

```react
// 聊天框：结束移动
const mouseUpHandler = () => {
  setCanMove(false)
  setUserSelect("text");
  // 持久化聊天宽度
  localStorage.setItem(DiscussLeftWidth, leftWidth);
  localStorage.setItem(DiscussRightWidth, rightWidth);
}
```

### root 订阅 `mousemove`

首先获取窗口的宽度:

```react
const [screenWidth, setScreenWidth] = React.useState(100); // 聊天框：当前窗口宽度，计算左右比例

React.useEffect(() => {
 	 setScreenWidth(document.body.clientWidth);
}, [])
```

鼠标在`root` 元素内移动时，计算左右边框的百分比，为了避免鼠标移动重载次数过多导致的卡顿，加锁：

```react
const [lockResize, setLockResize] = React.useState(false); // 聊天框：加载锁，不要设置太快了
```

root 订阅鼠标移动

```react
const mouseMoveHandler = (e) => {
  if (canMove) {
    let lw = (e.clientX / screenWidth * 100).toFixed(3)
    let rw = (100 - lw - 1).toFixed(3);
    if (!lockResize && lw > 50 && (screenWidth - e.clientX) > 300) {
      setLeftWidth(lw)
      setRightWidth(rw)
      setLockResize(true)
      // 10毫秒以后释放该锁
      setTimeout(() => { setLockResize(false) }, 10)
    }
  }
}
```

# 滚动条样式

默认的滚动条样式时很粗的，中间加了 `resizer`以后就太丑了，滚动条必须瘦下来才行：

```css
left: {
  overflowY: "scroll",
  padding: 10,
  "&::-webkit-scrollbar": {
    width: 4,
  	// height: 16 只能设置宽度，长度浏览器会自动根据div长度调整
  },
  "&::-webkit-scrollbar-thumb": {
    backgroundColor: "rgba(105, 112, 125, 0.5)" // 滚动条背景色
  }
},
```

- `::-webkit-scrollbar` — 整个滚动条.
- `::-webkit-scrollbar-button` — 滚动条上的按钮 (上下箭头).
- `::-webkit-scrollbar-thumb` — 滚动条上的滚动滑块.
- `::-webkit-scrollbar-track` — 滚动条轨道.
- `::-webkit-scrollbar-track-piece` — 滚动条没有滑块的轨道部分.
- `::-webkit-scrollbar-corner` — 当同时有垂直滚动条和水平滚动条时交汇的部分.
- `::-webkit-resizer` — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

![image-20201229003702633](/images/blog/1/react/assert/image-20201229003702633.png)























































































