React

9篇文章

要想让TS正确的代码提示,直接使用createContainer(useToggle);是无法保证代码正确提示的。因此需要传递数据类型参数,告诉TypeScript正确的提示代码。

const Toggler = createContainer<[boolean, Actions], boolean>(useToggle);

这时候再使用,就会有正确的代码提示了。

const [state, { setLeft }] = Toggler.useContainer();

The development server will only attempt to send requests without text/html in its Accept header to the proxy.

官方文档

devServer只会代理Header中Accept不是text/html的请求。

使用source-map-explorer工具,检查各个组件包的占用情况。

npm install --save source-map-explorer

修改package.json的script命令。

"scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "build": "react-scripts build"
}

打包,然后分析即可。

npm run build
npm run analyze

缩短首屏渲染的方案有服务端渲染以及预渲染。服务端渲染的缺点是,每次切换路由都要在服务端重新生成,这样会导致第一个字节到达的时间增长。

预渲染的方案是在打包时,就是用无头浏览器,将路由页面生成为静态的HTML文件,来缩短请求时间。

React官方文档中提到了基于路由的代码分割的方案,方法如下: 这样打包出来的chunk的名字是ID格式,检查起来不是很方便。 基于webpack提供的Magic Comments方案,我们可以实现修…
React 中常常会用到Ref对组件进行命令式的调用,官方对不同ref值的介绍如下: ref 的值根据节点的类型而有所不同: 当 ref 属性用于 HTML 元素时,构造函数中使用…
在React开发中经常会遇到controlled和uncontrolled组件的问题处理,最近仔细阅读了官方文档以及相关的介绍,整理一份基础笔记。 非受控组件 当用户将数据输入到表单字段(例如 inp…
竞争危害(race hazard)又名竞态条件、竞争条件(race condition),它旨在描述一个系统或者进程的输出依赖于不受控制的事件出现顺序或者出现时机 在前端中的表现常见于异步操作的结果返…
React ※ 无状态的组件使用stateless组件直接返回即可 ※ 永远为组件的可选参数设置默认值,这样有助于阅读理解 ※ 使用spread操作符传递参数时,保证所有参数都已知,不要将未知的参数传…

关注我们的公众号

微信公众号