简易总结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 介绍「 ...
随机推荐
- ES6复制数组
ES6复制数组和合并数组 一.复制数组与合并数组 复制数组:它是复合数据类型,直接复制只是复制了指向底层数据结构的指针,而不是复制一个全新的数组 <!DOCTYPE html> <h ...
- 使用百度地图API自动获取地址和经纬度
先上效果图,这是直接点击获取经纬度和地址的.没有做搜索的功能. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- EasyUI中的重要的控件和属性
data-options: precision:2 保留2为小数 validType:
- 查看PHP指定扩展的版本信息
命令:php --ri 扩展名
- 7.SpringMVC 配置式开发-ModelAndView和视图解析器
ModelAndView 1.Model(模型) 1.model的本质就是HashMap,向模型中添加数据,就是往HashMap中去添加数据 2.HashMap 是一个单向查找数组,单向链表数组 3. ...
- 8.Spring整合Hibernate_2_声明式的事务管理(Annotation的方式)
声明式的事务管理(AOP的主要用途之一) (Annotation的方式) 1.加入annotation.xsd 2.加入txManager bean 3.<tx:annotation-drive ...
- c# MVC方式文件上传
MVC控制器中代码 index.cshtml <form action="/Home/Upload" method="post" enctype=&quo ...
- static成员函数和static成员
C++的静态成员是和类关联的,它属于某个类,但是不属于某个特定的对象.静态成员变量只存储一份供所有对象共用.所以在所有对象中都可以共享它.使用静态成员变量实现多个对象之间的数据共享不会破坏隐藏的原则, ...
- [转载] 关于CI,CD,jenkins
Jenkins入门(一) https://blog.csdn.net/miss1181248983/article/details/82840006
- (转)再过半小时,你就能明白kafka的工作原理了
为什么需要消息队列 周末无聊刷着手机,某宝网APP突然蹦出来一条消息“为了回馈老客户,女朋友买一送一,活动仅限今天!”.买一送一还有这种好事,那我可不能错过!忍不住立马点了去.于是选了两个最新款,下单 ...