react学习笔记

| react

1.资源文件位置 图片一般放在src/assets目录下
2.如何引入文件路径

1.可以使用create-react-app提供的yarn run eject 将所有内建的配置暴露出来，然后配置

2.Create React App 3可以使用绝对路径，参考官网或者网上一些文章，例如https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

3.我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
customize-cra。
	const {
		override,
		fixBabelImports,
		addWebpackAlias
	} = require('customize-cra')
	const path = require('path')

	function resolve(dir) {
		return path.join(__dirname, '.', dir)
	}
	module.exports = override(
		// 配置路径别名
		addWebpackAlias({
			views: resolve('src/views'),
			service: resolve('src/service'),
			store: resolve('src/store'),
			utils: resolve('src/utils')
		}),
		// antd按需加载
		fixBabelImports('import', {
			libraryName: 'antd',
			libraryDirectory: 'es',
			style: 'css'
		})
	)

3 react中css解决方案

1 原生CSS结合CSS处理器（Sass和PostCSS/less）：该方式样式易于全局污染，多人协作易于发生冲突
引入less或sass ,css文件以.less或.scss结尾，然后引入
2 React中编写CSS常见的方式
Inline CSS
CSS In JS
Styled Components

CSS Modules 使用CSS Modules编写CSS，相比原生CSS是舒服多了，但引用组件库（独立库）就有点头疼，组件库样式覆盖令人头疼
可参考这篇文章https://juejin.im/post/5b39e63ae51d4562aa017c81#heading-9

使用css module方式
css文件结尾 [name].module.scss
import header from ‘./index.module.less’;
jsx 文件 如果css命名为短横线形式的需要使用[]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Header() {
    return (
        <header className={header['App-header']}>
            <div className={header['headerWrap']}>
                <img src={logo} className={header['App-logo']} alt="logo" />
                <div>
                    <Link to="/home" className={header['App-link']}>首页</Link>
                    <Link to="/about" className={header['App-link']}>关于</Link>
                    <Link to="/login" className={header['App-link']} >登录 </Link>
                </div>
            </div>
        </header>
    );
}

4 国际化
react-18next

5 打包 在package.json 加入”homepage”: “.”

6 跨域

在src/目录下新建setupProxy.js 

1
2
3
4
5
6
7
8
先安装npm install --save-dev http-proxy-middleware
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
    app.use(proxy('/api/v1', {
        target: 'https://cnodejs.org',
        changeOrigin: true
    }));
}

要写changeOrigin: true
参考 https://github.com/chimurai/http-proxy-middleware

7 可以搭配metiara ui

8 grid 布局
这个挺好用的，但是兼容还是有待考虑，目前flex用的比较多

9 react中使用svg icon

1或许可以自己封装成一个组件
2creat-react-app中有提供功能
直接导入svg作为React组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo 是一个实际的 React 组件 */}
    <Logo />
  </div>
);
  >3直接改变
  .App-logo g{
      fill:salmon;
  }
  .App-logo path{
      stroke:palegoldenrod;
      stroke-width:10px;
      fill:none;
      stroke-dasharray;35px 15px;
      animation:orbit 1s infinite linear;
  }
  @keyframes orbit {to {stroke-dashoffset:50px;}}

https://www.html.cn/create-react-app/docs/adding-images-fonts-and-files/
可能涉及到的名词 svgr react-svg-loader
可参考文章https://medium.com/@rossbulat/working-with-svgs-in-react-d09d1602a219
https://www.robinwieruch.de/react-svg-icon-components
https://medium.com/itsoktomakemistakes/react-create-react-app-svg-icons-styled-component-570b4e9f07b

webpack加载程序是SVGR提供的三个主要解决方案之一，具体取决于您是希望在命令行上，在自动脚本中操作SVG，还是在将它们导入模块时：

@svgr/cli：CLI工具，为我们提供了简单的命令，可以将单个文件或整个SVG文件目录转换为React组件.js文件
@svgr/core：此核心SVGR包旨在嵌入NodeJS程序中，以构建用于将SVG处理为组件的自动化工具
@svgr/webpack：最广泛采用的解决方案，以及将SVG作为React组件导入的优雅方法

作为Rollup或Parcel插件：另外两个Javascript模块捆绑包，它们不太了解，但支持SVGR。
使用前三个包装的优点是相辅相成的; 如果需要，可以在React项目的SVG管理工作流程中采用CLI，Node API和Webpack包。

然而，我们在这里专注于Webpack加载器，我们将在本文的后面进一步使用它来演示现代SVG集成的实际用例。

10 代码分割

1
2
3
4
5
6
7
使用之前：
import { add } from './math';
console.log(add(16, 26));
使用之后：
import("./math").then(math => {
  console.log(math.add(16, 26));
});

动态 import() 语法目前只是一个 ECMAScript (JavaScript) 提案， 而不是正式的语法标准。预计在不远的将来就会被正式接受。
当 Webpack 解析到该语法时，它会自动地开始进行代码分割。如果你使用 Create React App，该功能已配置好，你能立刻使用这个特性。Next.js 也已支持该特性而无需再配置。

11懒加载
React.lazy
注意:
React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。
React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

使用之前：

1
2
3
4
5
6
7
8
import OtherComponent from './OtherComponent';
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

使用之后：

1
2
3
4
5
6
7
8
9
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

这个代码将会在渲染组件时，自动导入包含 OtherComponent 组件的包。

React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。

12命名导出（Named Exports）

React.lazy 目前只支持默认导出（default exports）。如果你想被引入的模块使用命名导出（named exports），
你可以创建一个中间模块，来重新导出为默认模块。这能保证 tree shaking 不会出错，并且不必引入不需要的组件。

1
2
3
4
5
6
7
8
// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

mage-webapck-loader，safari和firefox和ie都无法显示图片，之前不知道是插件的原因，所有各种找问题

13Gatsby

用 React 创建静态网站的最佳方式。它让你能使用 React 组件，但输出预渲染的 HTML 和 CSS 以保证最快的加载速度。
https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#gatsby

######14useEffect 频繁请求接口
https://juejin.im/post/5c98fb35518825157172acc6#heading-0

=======================useReducer========================

1.使用useReducer 和useContext 可以替代redux和react-redux 的功能（使用useReducer和useContext Hooks构建自己的React-Redux，性能优化有待考虑），但这并不意味着你放弃使用redux，因为redux还有很强大的功能，或许你
可以根据情况选择性的使用

2.react-redux 也提供了hook API，可以替代connect方法 ，useActions() 这个在alpha版本中被删除。该建议基于“binding action creators”在基于钩子的用例中没有用处，并且导致过多的概念开销和语法复杂性。
当然你可以手动实现一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function FriendStatusWithCounter(props) {
    const [count, setCount] = useState(0)
    useEffect(() => {
        document.title = `You clicked ${count} times`
    })
    const [isOnline, setisOnline] = useState(null)
    useEffect(() => {
        function handleStatusChange(status) {
            setisOnline(status.isOnline)
        }
        ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
        return () => {
            ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
        };
    })
}