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三大基础的更多相关文章

  1. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  2. 使用React Hook后的一些体会

    一.前言 距离React Hook发布已经有一段时间了,笔者在之前也一直在等待机会来尝试一下Hook,这个尝试不是像文档中介绍的可以先在已有项目中的小组件和新组件上尝试,而是尝试用Hook的方式构建整 ...

  3. react的三大属性

    react的三大属性 state props  refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...

  4. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  5. [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 ...

  6. React Hook 学习

    1.官方文档 https://react.docschina.org/docs/hooks-intro.html 2.阮一峰 reactHook http://www.ruanyifeng.com/b ...

  7. React Hook:使用 useEffect

    React Hook:使用 useEffect 一.描述 二.需要清理的副作用 1.在 class 组件中 2.使用 effect Hook 的示例 1.useEffect 做了什么? 2.为什么在组 ...

  8. GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)

    GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...

  9. GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)

    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...

随机推荐

  1. C++ STL 之 deque容器 打分案例(内含sort排序用法)

    #include <iostream> #include <vector> #include <time.h> #include <deque> #in ...

  2. 3.MySQL的架构介绍

    MySQL简介: 高级MySQL:mysql 内核 sql优化工程师 mysql服务器的优化 各种参数常量设定 查询语句优化 主从复制 软硬件升级 容灾备份 sql编程 完整的mysql优化需要很深的 ...

  3. 6.Cookie和Session

    /*会话*/ (开一个浏览器,访问几个web资源,然后关闭浏览器,这个过程为一个对话) /*保存*/会话数据的两种技术(cookie session) 1.Cookie (客户端技术)(数据保存在客户 ...

  4. C语言编译过程及相关文件

    1,C程序编译步骤 C代码编译成可执行程序经过4步: 1)预处理:宏定义展开.头文件展开.条件编译等,同时将代码中的注释删除,这里并不会检查语法 2)编译:检查语法,将预处理后文件编译生成汇编文件 3 ...

  5. Spring Cloud(九)高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务

    上一篇文章,讲了SpringCloudConfig 集成Git仓库,这一篇我们讲一下SpringCloudConfig 配和 Eureka 注册中心一起使用 在分布式系统中,由于服务数量巨多,为了方便 ...

  6. BootStrap【三、组件】

    特有标签属性 role 用于浏览器识别 aria-label 用于浏览器识别 tabIndex 用于浏览器识别 data- 自定义数据属性 图标 直接引用官方图标库中的class 官方图标库 Demo ...

  7. shiro系列二、身份验证和授权

    一.身份验证 先来看看身份验证的流程 流程如下: 1.首先调用Subject.login(token)进行登录,其会自动委托给Security Manager,调用之前必须通过SecurityUtil ...

  8. 01.Zabbix监控快速入门

    1.监控知识基本概述 1.为什么要使用监控 1.对系统不间断实时监控 2.实时反馈系统当前状态 3.保证服务可靠性安全性 4.保证业务持续稳定运行 2.如何进行监控,比如我们需要监控磁盘的使用率 1. ...

  9. axios 用 params/data 发送参数给 springboot controller,如何才能正确获取

    今天有人遇到接口调用不通的情况,粗略看了一下是axios跨域请求引起了.找到问题,处理就简单多了. 但是我看其代码,发现比较有意思 export function agentlist(query) { ...

  10. 1.安装Loucust

    python 3.x 通过pip安装: pip install locustio 如果是以分布式队列运行locust,需要装一种通信队列的库pyzmq  :pip install pyzmq 安装成功 ...