React Native进阶_第4页-阿里云

文章 2023-01-15 来自：开发者社区

react 进阶hook 之自定义Hook

含义从标题上看，自定义hook的主要是自己定义，那么对于hooks的定义又是啥呢？简单点的回答，hooks是一个函数，并且是在react 函数组件中使用的，不同的hook的作用也是不一样的，例如，state hook是用来定义函数组件的状态，而effect hook 是用来定义组件的副作用,那么自定义hook是用来干啥的呢？,自定来定义一个hook 函数，里面可以包含多个hooks。简单点....

文章 2023-01-15 来自：开发者社区

react 进阶hook 之 Effect Hook

Effect HookEffect Hook：用于在函数组件中处理副作用,类似我们类组件中的生命周期函数的，ComponentDidMount（组件刚刚挂载需要进行数据请求等副作用）,ComponentDIdUpdate（组件数据已经更新并且页面已经完成挂载的对dom操作的副作用），ComponentwillUnMount(组件即将卸载销毁清楚定时器等副作用)，类组件生命周期详情语法// 第一个....

文章 2023-01-14 来自：开发者社区

react 进阶hook 之 State Hook

State Hook大家都知道，在react的类组件中是可以使用状态的——state,那么在函数组件中怎么使用状态呢？在react16.8的之后中提出了hook这个概念。State Hook是一个在函数组件中使用的函数（useState），用于在函数组件中使用状态。并且使用起来会让人感觉神清气爽。语法const [a, setA] = useState('参数')useState函数有一个参数，....

文章 2023-01-14 来自：开发者社区

react组件进阶之代码性能工具的使用

工具这里所说的工具是指我们在书写react代码中，来帮我们检查代码是否规范，并且符合标准的工具严格模式StrictMode(React.StrictMode)，本质是一个组件，该组件不进行UI渲染，它的作用是，在渲染内部组件时，发现不合适的代码。识别不安全的生命周期关于使用过时字符串 ref API 的警告关于使用废弃的 findDOMNode 方法的警告检测意外的副作用。React要求，副作用....

文章 2023-01-14 来自：开发者社区

react组件进阶之事件原理

在前文中，我们初步了解了react 的事件的使用方式，并且只是了解到react 的语法和原生的语法很相似。但是真正的事件原理，其实是大不相同的。React中的事件这里的事件：React内置的DOM组件中的事件1. 注册事件在react 中，给组件注册的事件，不是真正的给组件内的div，或者是其他的元素注册的事件，而是通过事件冒泡的形式，最终都是给document注册的事件。（react 16版本....

文章 2023-01-14 来自：开发者社区

react 组件进阶之Error Boundaries（错误边界）

含义错误边界：用来捕捉错误的代码，说到捕捉错误。大家可能都会说直接try catch 不就行了。对的，try catch 确实是一种在各个语言比较通用的方法。但是在react 组件中，如果某一个组件发生错误，他是会往他的父级组件抛出错误的，然后自己是会被卸载的。如果到跟组件都不能够处理错误，这个组件树就会被卸载，组件树卸载导致的页面效果就是直接的报错。默认情况下，若一个组件在渲染期间（ren....

文章 2023-01-14 来自：开发者社区

react 组件进阶之 Portals

含义Portals 翻译为门户，但是感觉不对。作用类似插槽，但是不是vue 里面的插槽哦，有点像vue3 里面的 teleport,两者的作用都是将对于的虚拟dom 插入到真实dom的某个位置上。这里不讲两者的区别，只讲 Portals 的用法语法ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素....

文章 2023-01-14 来自：开发者社区

react组件进阶 render props （渲染属性） ts

含义render props 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术简单点说，就是用来关注功能一样，ui界面不一样横向关注点。这个其实不是一个新的知识，是在js 灵活继承上进行拓展的。举个例子官网举得那个例子蛮不错的，有兴趣的可以看一下我举一个这样的场景，在编辑用户，我们需要一个用户数据的表单，然后在个人中心的时候，....

文章 2023-01-14 来自：开发者社区

react 组件进阶之 pureComponent(纯组件)

阅读下面的代码，请回答 render 总共执行了多少次？这个问题涉及到react的生命周期。代码如下import React, { Component, PureComponent } from 'react' /** * 组件有两个状态，一个是li,另一个是添加li */ interface ITestPureComponentS { lis: number[], addLi: (...

文章 2023-01-14 来自：开发者社区

react组件进阶之 context(上下文)

含义上下文（context）: 是指一个组件里面包含所有子组件组成dom 的树，那么在这颗虚拟dom树中的环境，就称之为上下文。说到树这个概念，稍微提一笔，在树中，每一个节点我们都可以理解他是一颗树的根节点（起始节点）。react中的上下文的特点：1.当某个组件创建了上下文后，上下文中的数据，会被所有后代组件共享,如概念所说，子组件与父组件中都可以使用上下文的数据。2.如果某个组件依赖了上下文，....

React Native您可能感兴趣