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. Javascript简单教程汇总

    什么是函数 一段定义好的代码,并可以反复使用的代码块 函数的作用 提升代码的可复用性,将一段代码进行预定义,需要使用的时候才触发 代码块 形成了一个相对独立的作用域 语法: function  函数名 ...

  2. 用Leangoo泳道完美实现Scrum任务看板

    转自:https://www.leangoo.com/9568.html 在敏捷开发的实践当中,通过可视化的任务看板来实现团队协同和透明化管理是必不可少的一个实践.通过可视化的任务看板我们可以达到如下 ...

  3. android程序复制数据库

    一般项目中我们把db文件放到assert或者raw目录下面,在程序第一次启动的时候复制到私有目录下面 在使用过程中,老是发现复制不成功,私有目录下的db文件总是3072 后来发现应该是使用Conten ...

  4. Linux 虚拟机扩容

    由于在装软件,原来的20G空间不够使用,需要扩容操作. 1.关闭虚拟机 2.点击编辑虚拟机设置 选中硬盘,添加,硬盘,推荐,确定大小,完成. 2.启动虚拟机 查看磁盘使用情况: [root@maste ...

  5. BootStrap【四、插件】

    BootStrap插件基于: 1.BootStrap.js 2.BootStrap.js基于JQuery data属性 1.通过data属性控制页面交互 2.$(document).off('.dat ...

  6. 解决织梦5.7添加新变量出现:Request var not allow!的办法

    找到:根目录->include->common.inc.phpif( strlen($svar)>0 && preg_match('#^(cfg_|GLOBALS|_ ...

  7. Delphi 建立非可视化对象

  8. 微信小程序html(wxml)传参

    欢迎加入前端交流群交流知识:749539640 习惯了vue.angular用微信小程序有时候真感觉非人类..需要用data-xxx 先说下我们在vue.angular里事件传参 //html < ...

  9. C 动态内存申请

    例子: int *p=0; int number=0; scanf("%d",&number); p = (int*)malloc(number*sizeof(int));

  10. 03_ Flume采集(监听)目录到HDFS案例

    采集需求:某服务器的某特定目录下,会不断产生新的文件,每当有新文件出现,就需要把文件采集到HDFS中去 根据需求,首先定义以下3大要素 l.采集数据源,即source——监控文件目录 :  spool ...