简易总结react-hook三大基础
react-hook的最重要的三大基础
import { useEffect, useState, useContext } from 'react'
1、每一个简单的一句话总结
useEffect // 万能的生命周期、每次都触发的生命周期、可以重复写多个的生命周期
useState // 创建值、创建改变值的方法
useContent // react自带的redux(mobx)、方便组建间传值
2、conState
const [count, setCount] = useState(0)
3、useEffect
// 表示只执行一次
useEffect(() => {
}, []) // 第一次执行,以及表示count变化时执行
useEffect(() => {
}, [count])
4、useContent
// 用于创建共同的父级
import { createContext } from 'react'
const UserContext = new createContext() // 父级内容包裹上下文
// value 父级传值的内容
<UserContext.Provider value={{ number, setNumber }}>
</UserContext.Provider> // 子级要有方法获取UserContext(这里是props的方法,也可以export引出然后引入)
<Content1 test={UserContext} />
// 子级然后就可以直接使用useContent获取,并且直接调用即可
const test = useContext(state.test)
简易总结react-hook三大基础的更多相关文章
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 使用React Hook后的一些体会
一.前言 距离React Hook发布已经有一段时间了,笔者在之前也一直在等待机会来尝试一下Hook,这个尝试不是像文档中介绍的可以先在已有项目中的小组件和新组件上尝试,而是尝试用Hook的方式构建整 ...
- react的三大属性
react的三大属性 state props refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- [React] Detect user activity with a custom useIdle React Hook
If the user hasn't used your application for a few minutes, you may want to log them out of the appl ...
- React Hook 学习
1.官方文档 https://react.docschina.org/docs/hooks-intro.html 2.阮一峰 reactHook http://www.ruanyifeng.com/b ...
- React Hook:使用 useEffect
React Hook:使用 useEffect 一.描述 二.需要清理的副作用 1.在 class 组件中 2.使用 effect Hook 的示例 1.useEffect 做了什么? 2.为什么在组 ...
- GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)
GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...
- GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)
GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...
随机推荐
- Webstorm2017.3.3软件的安装使用
下载 ▶进入jetbrains的官方网站点击download,即下载开始.官方网站链接:http://www.jetbrains.com/webstorm/ 安装 ▶双击刚下载完成的.exe文件开始进 ...
- ORACLE数据库 自动备份 定时计划任务 windows
疑问为什么没有输入oracle 的数据库安装目录就能直接备份呢,可能是因为oracle默认安装c盘,在docs命令直接能操作吧,不信可以使用sqlplus试试. 一共分三步: 一.建立一个.bat 批 ...
- Nagios4.x安装配置总结
1. Nagios介绍 Nagios是一个监视系统运行状态和网络信息的监视系统.Nagios能监视所指定的本地或远程主机以及服务,同时提供异常通知功能等. Nagios可运行在Linux/Unix平 ...
- Django 权限控制配置步骤
1.models下面添加权限控制信息: class UserProfile(models.Model): user = models.OneToOneField(User) name = models ...
- C++STL库常用函数用法
开学就要上OOP了.....感觉十分萌萌哒- -! 整理自<ACM程序设计>,本文为转载(原文地址) 迭代器(iterator) 个人理解就是把所有和迭代有关的东西给抽象出来的,不管是数组 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具]
[易学易懂系列|rustlang语言|零基础|快速入门|(28)|实战5:实现BTC价格转换工具] 项目实战 实战5:实现BTC价格转换工具 今天我们来开发一个简单的BTC实时价格转换工具. 我们首先 ...
- Spring源码解读(一)
前期准备 首先搭建一个简单的Spring Demo工程 项目目录结构如下图所示: applicationContect.xml (可以取其他文件名,只要在加载配置文件时指定文件路径) <?xml ...
- (五)zabbix微信报警
1.注册微信企业号 1)注册微信企业号 https://work.weixin.qq.com 2)通讯录添加用户 3)记住部门id 4)创建应用 5)点击刚创建的应用,记住Agentld和secret ...
- hadoop关闭安全模式
执行以下语句即可 hadoop dfsadmin -safemode leave
- 简单的理解 StringBuffer/StringBuilder/String 的区别
StringBuffer/StringBuilder/String 的区别 这个三类之间主要的区别:运行速度,线程安全两个方面. 速度方面(快到慢): StringBuilder > Strin ...