react native loading动画_React高级进阶指南

7b4b40f07396ffd1440e30bedce5268e.png

懒加载

React.lazy函数能让你像渲染常规组件一样处理动态引入(的组件)。 Suspense加载指示器为组件做优雅降级。 fallback属性接受任何在组件加载过程中你想展示的 React 元素。

const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() { return ( 
Loading...
}>
);}

Context

Context提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法,设计目的是为了共享那些对于一个组件树而言是“全局”的数据。

// Context 可以让我们无须明确地传遍每一个组件,就能将值深入传递进组件树。// 为当前的 theme 创建一个 context(“light”为默认值)。const ThemeContext = React.createContext('light');class App extends React.Component { render() { // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。 // 无论多深,任何组件都能读取这个值。 // 在这个例子中,我们将 “dark” 作为当前的值传递下去。 return (  ); }}// 中间的组件再也不必指明往下传递 theme 了。function Toolbar(props) { return ( ; }}

请谨慎使用,因为这会使得组件的复用性变差。

API:

React.createContext: 创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。只有当组件所处的树中没有匹配到 Provider 时,其 defaultValue 参数才会生效。

Context.Provider: 每个 Context 对象都会返回一个 Provider React 组件,它允许消费组件订阅 context 的变化。当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染。

Class.contextType: 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它,包括 render 函数中。

Context.Consumer: 这里,React 组件也可以订阅到 context 变更。这能让你在函数式组件中完成订阅 context。

Refs

Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。不能在函数组件上使用 ref 属性,因为他们没有实例,可以在函数组件内部使用 ref 属性。

适合使用 refs 的情况: - 管理焦点,文本选择或媒体播放。 - 触发强制动画。 - 集成第三方 DOM 库。

使用方法:

  1. 创建 Refs
  2. Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。 class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return
  • 在 ref 的 current 属性中被访问 const node = this.myRef.current;

Refs 转发

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。子组件使用React.forwardRef接收ref。可用于Hoc处理ref。

const FancyButton = React.forwardRef((props, ref) => (  {props.children} ));// 你可以直接获取 DOM button 的 ref:const ref = React.createRef();Click me!;

上例中,FancyButton 使用 React.forwardRef 来获取传递给它的 ref,然后转发到它渲染的 DOM button。这样,使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref ,并在必要时访问,就像其直接使用 DOM button 一样。

Fragments

Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。key 是唯一可以传递给 Fragment 的属性

render() { return (  );}

可简写为<>>

高阶组件(HOC)

HOC是参数为组件,返回值为新组件的函数。

HOC 不会修改传入的组件,也不会使用继承来复制其行为。相反,HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数,没有副作用。

示例:

// 此函数接收一个组件...function withSubscription(WrappedComponent, selectData) { // ...并返回另一个组件... return class extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { data: selectData(DataSource, props) }; } componentDidMount() { // ...负责订阅相关的操作... DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ data: selectData(DataSource, this.props) }); } render() { // ... 并使用新数据渲染被包装的组件! // 请注意,我们可能还会传递其他属性 return ; } };}

上例中class组件为HOC的容器组件,容器组件担任分离将高层和低层关注的责任,由容器管理订阅和状态,并将 prop 传递给处理渲染 UI。HOC 使用容器作为其实现的一部分,你可以将 HOC 视为参数化容器组件。

注意事项:

  • 不要在 render 方法中使用 HOC。

在render中使用会导致diff 算法在对比组件变化时每次检测都不一样,每次渲染都会进行卸载,和重新挂载的操作,这不仅仅是性能问题 - 重新挂载组件会导致该组件及其所有子组件的状态丢失。

  • 务必复制静态方法到容器组件上。

可以使用hoist-non-react-statics自动拷贝所有非 React 静态方法 import hoistNonReactStatic from 'hoist-non-react-statics'; function enhance(WrappedComponent) { class Enhance extends React.Component {/*...*/} hoistNonReactStatic(Enhance, WrappedComponent); return Enhance; }

  • Refs 不会被传递。

可用过Refs 转发解决

常见的HOC:

redux的 connect

React.PureComponent

大部分情况下,你可以使用 React.PureComponent 来代替手写 shouldComponentUpdate。只有当检测数据是数组或对象时,由于浅拷贝的问题会导致比较出现偏差不能使用,此时使用深拷贝仍可继续使用。

如以下代码:

class CounterButton extends React.Component { constructor(props) { super(props); this.state = {count: 1}; } shouldComponentUpdate(nextProps, nextState) { if (this.props.color !== nextProps.color) { return true; } if (this.state.count !== nextState.count) { return true; } return false; } render() { return (  this.setState(state => ({count: state.count + 1}))}> Count: {this.state.count}  ); }}

可替换为:

class CounterButton extends React.PureComponent { constructor(props) { super(props); this.state = {count: 1}; } render() { return (  this.setState(state => ({count: state.count + 1}))}> Count: {this.state.count}  ); }}

Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框:

render() { // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。 // `domNode` 是一个可以在任何位置的有效 DOM 节点。 return ReactDOM.createPortal( this.props.children, domNode );}

React.StrictMode

StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。严格模式检查仅在开发模式下运行;它们不会影响生产构建。

作用:

  • 识别不安全的生命周期
  • 关于使用过时字符串 ref API 的警告
  • 关于使用废弃的 findDOMNode 方法的警告
  • 检测意外的副作用
  • 检测过时的 context API

React.memo

React.memo 为高阶组件。它与 React.PureComponent 非常相似,但它适用于函数组件,但不适用于 class 组件。

如果你的函数组件在给定相同 props 的情况下渲染相同的结果,那么你可以通过将其包装在 React.memo 中调用,以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下,React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

默认情况下其只会对复杂对象做浅层对比,如果你想要控制对比过程,那么请将自定义的比较函数通过第二个参数传入来实现。

const MyComponent = React.memo(function MyComponent(props) { /* 使用 props 渲染 */});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟接口+tx+linux,Linux使用笔记: 解决Xen虚拟机中VLAN接口不能ping大包的问题

出于调试的需要&#xff0c;想在两个Xen虚拟机间使用VLAN相互访问。在Linux上启用VLAN非常简单&#xff0c;只需要使用命令vconfig配置一个VLAN接口就可以了&#xff1a;vconfig add eth0 3ifconfig eth0.3 11.11.4.2 netmask 255.255.255.0 up删除VLAN则使用vconfig rem eth0.…

在一起计时器_古典计时器简介之一 qqtimer

可持续水文的路子又多了一条。在这一系列古典计时器中&#xff0c;qqtimer的地位有些特殊&#xff0c;因为现在还有不少人使用它&#xff0c;而之后要介绍的其他计时器已经基本没啥人用了。有两位最知名的WR日常练习的计时器都是它。首先是Feliks Zemdegs&#xff0c;虽然他已经…

可以装linux的路由器,[转载]linux路由器Quagga的配置(一):安装

部分资料摘自http://blog.chinaunix.net/uid-25513153-id-212328.htmlQuagga是一款功能比较强大的开源路由软件&#xff0c;支持rip,ripng,ospfv2,ospfv3&#xff0c;bgp等协议。目前最新版本为Quagga0.99.17。安装Quagga的目的是使装有linux(我采用的是Ubuntu10.04LTS)系统的电…

管理节点连接不上sql节点_质量成本管理:成本控制、成本分析、费用使用流程与节点说明...

关注【本头条号】更多关于制度、流程、体系、岗位、模板、方案、工具、案例、故事、图书、文案、报告、技能、职场等内容&#xff0c;弗布克15年积累免费与您分享&#xff01;阅读导航→01 质量成本控制流程与节点02 质量成本分析流程与节点03 质量费用使用控制流程与节点质量部…

linux ipset 流量,linux中ipset命令的使用方法详解

linux中ipset命令的使用方法详解发布时间&#xff1a;2020-10-25 17:07:19来源&#xff1a;脚本之家阅读&#xff1a;97作者&#xff1a;lijiaocn栏目&#xff1a;服务器ipset介绍iptables是在linux内核里配置防火墙规则的用户空间工具,它实际上是netfilter框架的一部分.可能因…

springmvc工作流程_SpringMVC工作原理

买了好多书&#xff0c;但是没有一本是看完的&#xff0c;这是看完的第一本书&#xff0c;虽然页数不多、技术早就用了老多遍了&#xff0c;还是总结一下吧&#xff01;一、MVC模式MVC是 model、view、和controller的缩写&#xff0c;分别代表web应用程序中的三种职责&#xff…

c语言 vc++6.0集成开发环境的使用,VC6.0集成开发环境的使用.ppt

《VC6.0集成开发环境的使用.ppt》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《VC6.0集成开发环境的使用.ppt(11页珍藏版)》请在人人文库网上搜索。1、VC6.0集成开发环境,VC6.0集成开发环境,1.建立工作区(一),(1)选择菜单“FileNew”&#xff0c;打开“New”对话框&…

sql查找一个范围的值_销售需求丨查找问题

BOSS&#xff1a;茶&#xff0c;那个&#xff0c;什么茶来着&#xff1f;&#xff08;递过一杯茶...&#xff09;BOSS&#xff1a;&#xff1f;&#xff01;&#xff01;不是这个&#xff0c;我是说那个白茶啊&#xff01;白茶&#xff1a;......&#xff08;懵&#xff09;咋滴…

怎样用c语言算平均成绩,用C语言编程平均分数

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼当个反面典型&#xff0c;让大家见识下丑陋无比的程序好了&#xff0c;主要是想练练打字&#xff0c;HOHO。应该用二维数组且全部函数化的&#xff0c;rand的%后面或是101或是100&#xff0c;可能和编译器有关&#xff0c;TC2下应写…

pandas输出到excel_学Python还不会处理Excel数据?带你用pandas玩转各种数据处理

开场白以前学习 Python 的 pandas 包时&#xff0c;经常到一些 excel 的论坛寻找实战机会。接下来我会陆续把相关案例分享出来&#xff0c;还会把其中的技术要点做详细的讲解。本文要点&#xff1a;使用 xlwings &#xff0c;如同 vba 一样操作 excel使用 pandas 快速做透视表注…

cadence设计运算放大器_21.比较器的原理与特性,它与运算放大器的本质区别总结归纳...

1.电压比较器的工作原理电压比较器&#xff0c;顾名思义&#xff0c;就是两个输入端的其中一个作为基准&#xff0c;另外一个与基准作比较&#xff0c;输出只存在高电平和低电平两种状态。通过电压比较器&#xff0c;可以将模拟信号转变为数字信号。输入引脚的电位 > -输入引…

在c语言程序中无论是整数还是实数,C语言基础题及参考答案

C第一单元程序设计和&#xff23;语言一、选择题1&#xff0e;C语言的基本构成单位是&#xff1a; A 。A. 函数B. 函数和过程C. 超文本过程D. 子程序2&#xff0e;一个C语言程序总是从 B 开始执行。A. 主过程B. 主函数C. 子程序D.主程序3&#xff0e;C语言的程序一行写不下时&a…

插入排序最优_排序专题插入排序

今天开始&#xff0c;我计划用几篇专题来集中练习下有关排序的算法&#xff0c;排序算法是算法中最基础的算法了&#xff0c;所以这部分我们是要尽可能的全都掌握了。排序算法最常见的有如下几种&#xff1a;插入排序(Insertion Sort)选择排序(Selection Sort)希尔排序(Shell S…

c语言设计指导实训,C语言程序设计实训指导

与《c语言程序设计(第2版)》配套&#xff0c;给出所有习题及参考答案。按知识点&#xff0c;精选12个典型实训&#xff0c;给出实训目的与要求、实训内容及实训参考程序。附有自测(考试)样卷及参考答案&#xff0c;供读者自测。提供Turbo C 2.0上机环境介绍及常见的Turbo C 2.0…

python程序代码_python基础二

Python基础-注释的引入注释的分类:<1>单行注释:以#开头&#xff0c;#右边的所有文字当作说明&#xff0c;而不是真正要执行的程序&#xff0c;起辅助说明作用多行注释用三个单引号 ‘’’ 或者三个双引号 “”" 将注释括起来&#xff0c;例如:1、单引号&#xff08;…

电气自动化c语言实践操作论文,项目实践论文,关于独立学院电气工程其自动化专业基于CDIO的实践模式相关参考文献资料-免费论文范文...

导读:本文关于项目实践论文范文,可以做为相关论文参考文献,与写作提纲思路参考。(广州大学松田学院 广东广州 511370)摘 要&#xff1a;独立学院作为培养应用型人才的新生力量,要与地方经济社会发展相衔接,培养满足地方经济社会发展需要的、高素质的应用型人才.如何培养符合广东…

c语言 系统 dome,订餐系统(Dome)

import java.util.Scanner;public class OrderingMsg {public static void main(String[] args) throws Exception {Scanner scanner new Scanner(System.in);String[] names new String[6]; // 订餐人姓名String[] dishMsgs new String[6];// 选择菜品int[] numbers new i…

linux里用c实现cat_【案例】用T云做了什么能让企业在工业自动化控制系统行业里实现逆向增长?...

从制造至“智”造&#xff0c;工业正在逐步向自动化、智能化方向深入发展。行业背景&#xff1a;受疫情影响&#xff0c;2020年&#xff0c;上半年雪虐风饕&#xff0c;自动化市场需求下滑&#xff0c;随着后期政策红利推出&#xff0c;市场回暖&#xff0c;上半年的自动化需求…

qt android程序联网死机,qt android开发出现致命错误

启动远端进程。D/dalvikvm( 1387): Late-enabling CheckJNID/dalvikvm( 1387): GC_CONCURRENT freed 256K, 10% free 9307K/10272K, paused 2ms2ms, total 21msD/dalvikvm( 1387): WAIT_FOR_CONCURRENT_GC blocked 11msW/Bundle ( 1387): Key android.app.lib_name expected S…

微软符号服务器 2020年_微软介绍了2020年后它将如何淘汰Edge中的Flash支持

Microsoft Edge微软(通过Bleeping Computer)提供了更多关于它将如何放弃对Flash in Edge的支持以符合Adobe的计划的细节&#xff0c;包括一些值得注意的例外。正如所料&#xff0c;默认情况下&#xff0c;Edge将从2020年12月起禁用闪存。2020年6月之前发布的Flash版本将被完全屏…