react hook函数

State Hook

 useState()：状态钩子。纯函数组件没有状态，用于为函数组件引入state状态, 并进行状态数据的读写操作

语法、参数及返回值说明:：

 const [xxx, setXxx] = React.useState(initValue)

参数: 第一次初始化指定的值在内部作缓存
返回值: 包含2个元素的数组，第1个为内部当前状态值，第2个为更新状态值的函数

setXxx()2种写法:

setXxx(newValue): 参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
setXxx(value => newValue): 参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值

Context Hook

useContext()：共享状态钩子。作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。
Context：一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

语法、参数及返回值说明:：

创建Context容器对象：

const XxxContext = React.createContext()

渲染子组件时，外面包裹xxxContext.Provider，通过value属性给后代组件传递数据：

<xxxContext.Provider value={数据}><子组件/>
</xxxContext.Provider>

后代组件读取数据：

const {} = useContext(XxxContext)

例如：A组件和B组件需要共享一个状态:

import React, { useContext } from "react";
const HookTest = ()=> {const AppContext = React.createContext();const A = ()=> {const { name } = useContext(AppContext)return (<p>我是A组件,我的名字是：{ name }；<span>我是A的子标签：{ name }</span></p>)}const B= ()=> {const { name } = useContext(AppContext);return (<p>我是B组件,名字是： { name }</p>)}return (<AppContext.Provider value={{ name: '张三'}}><A /><B /></AppContext.Provider>)
}
export default HookTest;

3、Effect Hook

useEffect()：副作用钩子。用来更好的执行副作用操作(用于模拟类组件中的生命周期钩子)，如异步请求等，在类组件中会把请求放在componentDidMount里面，在函数组件中可以使用useEffect()

useEffect(() => { // 在此可以执行任何带副作用操作return () => { // 在组件卸载前执行// 在此做一些收尾工作, 比如清除定时器/取消订阅等}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

参数、返回值说明：

useEffect()接受两个参数，第一个参数是要进行的异步操作，第二个参数是一个数组，用来给出Effect的依赖项，只要这个数组发生变化，useEffect()就会执行。
当第二项省略不填时。useEffect()会在每次组件渲染时都会执行useEffect，只要更新就会执行。
当第二项传空数组[ ] 时，只会在组件挂载后运行一次。
useEffect()返回值可以是一个函数，在组件销毁的时候会被调用。清理这些副作用可以进行如取消订阅、清除定时器操作，类似于componentWillUnmount。

React中的副作用操作:

发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM

useEffect两个注意点：

React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前要用两个生命周期函数分别表示首次渲染(componentDidMonut) 和更新导致的重新渲染(componentDidUpdate)
useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行的。

总结：

可以把 useEffect Hook 看做如下三个函数的组合：componentDidMount()、componentDidUpdate()、componentWillUnmount()

react hook函数相关推荐

react+hook函数组件实现表单添加数据，表格展现
效果图: 目录结构:(目分为主页面BookTable,以及两个组件,表格组件和添加书籍组件) 主页面:主要是将两个组件引入进页面,并将添加书籍事件.删除书籍事件传递给子组件,由子组件触发. impor ...
react hook + stamen store + pug实现纯函数无痛版react开发体验
基于最新的react 16.7.0-alpha.2,结合react hook + stamen store + pug,实现纯函数无痛版react开发体验,畅快度直逼clojurescript + r ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
React Hook基本使用踩坑指南
React因为提倡函数式编程,所以提出了Hook思想来增强函数组件的功能,以此来替代基于Class的组件.但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来,还是用基于实 ...
如何使用React Hook
class组件和函数组件我们希望编写代码的时候,尽可能将整块可复用的部分封装起来.这样可以一定程度提高代码的内聚性,将其耦合性,使得程序开发变得更加可维护.通常情况下,我们将代码块抽离成组件来实现封 ...
react hook问题讲解
React Hook 官网地址:https://react.docschina.org/docs/hooks-faq.html (1)问题分析? Hook 是什么? Hook 是一个特殊的函数,它可以 ...
hook xposed 自定义类_【开始学习React Hook(1)】Hook之useState
react hook是react推出的一种特殊函数.这些函数可以让你在不创建react class的情况下依然可以使用react的一些特性(诸如目前react的钩子函数拥有的所有特性). 最常用的ho ...
React hook 中的数据获取
相关说明: 对于hook相关词不翻译,感觉翻译后怪怪的. effect hook 效果钩子,用于执行一些副作用例如获取数据 . state hook 状态钩子. 使用----------- 和 --- ...
react讲解（函数式组件，react hook）
文章目录前言一.函数式组件理解: 作用代码示例: 函数组件注意事项二.React hook React Hooks 优势 Hook 使用规则 2.常用的hook useState useEf ...

react hook函数

State Hook

Context Hook

3、Effect Hook

react hook函数相关推荐

最新文章

热门文章