![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
【React 随记】
记录一些 React 零散知识
-木云-
抛下自命不凡的想法,去读万卷书,行千里路...
展开
-
React Portals
组件默认会按照既定层次嵌套渲染,也就是说写在哪就会在哪渲染。 那么如何让组件渲染到父组件之外? 可以使用 Portals 渲染到 body 上 import React from 'react' import ReacDom from 'react-dom' class ItemList extends React.Component { // ... render() { let style = { position: fixed, ... } /** * 使用原创 2021-03-23 09:30:55 · 357 阅读 · 3 评论 -
React 异步组件
在项目中某些组件过大影响渲染速度时或者是组件需要懒加载时,可以使用异步组件加载。 在 React 中实现组件异步加载示例: import React from 'react' const AsynchronousComp = React.lazy(() => { import('../React_JSX') }) class ReactComp extends React.Component { render() { /** * 1. 使用 React.Lazy 和 im原创 2021-03-09 09:44:39 · 456 阅读 · 0 评论 -
React Context 和 useContext
1. Context 在 React 使用过程中,公共信息,例如语言,主题等如何传递给每个组件呢 而当组件层级不多不少的时候,共享的数据也不多时,这个时候会稍微有些尴尬,用 props 会有点繁琐, 而用 Redux 又不至于。那就可以考虑 Context。 Context 可以实现隔层传递,只需要在顶层组件定义,然后在子组件中按需引入即可,从而避免了一层一层的手动传递 props 属性。 Context 使用并不复杂,直接看看具体使用示例吧: 顶层组件: import React from 'react'原创 2021-03-08 18:36:01 · 472 阅读 · 0 评论 -
React Hooks
1.关于 React Hooks React 提倡函数式编程,view = fn(props),函数更灵活,更易拆分,更易测试。尽管函数组件有着许多优势,但是函数组件太简单了,许多功能class组件能轻易实现的功能函数组件很难或者不可能实现。因次,为了让函数组件拥有更强大的能力,Hooks出现了。 关于 Hooks 介绍,无论是官方文档还是网络上都已经有了很多介绍,下面直接对常用的一些 hook 使用进行介绍。 2. State Hook 函数组件是一个纯函数,执行完就销毁了,无法存储state,如果想拥有原创 2021-02-25 15:55:34 · 1375 阅读 · 0 评论