react hooks 全面转换攻略(一) react本篇之useState,useEffect
useState
经典案例:
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
)
}
此例子中, useState(0)
是最新的 hooks api;
语法:
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
其中 state 是他的值, setState 是用来设置值的函数, initialState 是初始值
useState-initialState
该初始值可以接受任何参数,但是记得当他接受为一个函数时,就变成了Lazy initialization
(延迟初始化)
该函数返回值即为initialState,
const [count, setCount] = useState(0);
const [count, setCount] = useState(()=>0);
// 这两种初始化方式 是相等的,但是在函数为初始值时会被执行一次
const [count, setCount] = useState(()=>{
console.log('这里只会在初始化的时候执行')
// class 中的 constructor 的操作都可以移植到这里
return 0
});
// 当第一次执行完毕后 就和另一句的代码是相同的效果了
useState-setState
也许很多人 在使用 class 的 setState 时候,会经常使用他的回调函数,
但是这里很遗憾,他只接受新的值,如果想要对应的回调,可以使用useEffect,这个问题等会会提供一个跳转链接
useEffect
语法:
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
经典案例:
useEffect(() => {
console.log('在 dep 改变时触发,若无 dep 则,每次更新组件都会触发')
return () => {
console.log('在组件 unmount 时触发')
};
});
deps 必须是一个数组,但是如果是一个空数组时:
useEffect(() => {
console.log('效果的等于 componentDidMount')
}, [])
即使有 deps ,他在初始化时也会触发一次
与 setState 形成回调函数:
在useState-setState
中提到, class 中 setState 都是有回调的,而在 hooks 中 通过 useEffect 同样也可以实现它的效果
关于回调值的探秘:
说起回调值,他能接受很多值,但是我们要搞清楚一点 他到底可以接受什么值,而他的变化的检测:
首先我们应该清楚, string,number,undefined,null 他的值都是能够正常检测的,
问题的关键还是在于 object 和 function
关于 object 的试验:
将回调值设置为一个在 function 外面的 object:
let deps = {grewer: 1}
在点击按钮时:
deps.grewer = deps.grewer + 1;
console.log(deps)
可以发现:
deps.grewer 的值在变化,但是 effect 却没有触发
而这样设置值时:
deps = {grewer: deps.grewer + 1};
每次都会触发 effect 函数
再次试验:
deps = Object.assign({}, deps)
同样地 每次都会触发 effect 函数
得出结论:
- 当依赖值为 object 时,他的值引用发生变化就会触发 effect 的更新
- 但是如果只是对象里某个值变化而引用不变化,effect 依旧不会触发
关于 function 的试验结论:
如果初始值为 function, 而将其改为数字等,会触发 effect
function 也是一个对象,当我们添加一个值在上面时,他的 effect 也不会触发
引用为一个新函数时,他每次都会触发;
试验完毕,相信大家对于 effect 也有了许多的了解
后续还会讲述其他 hooks api 与 redux 的全面转换, eslint 的新配置等
最新文章
- java 利用ManagementFactory获取jvm,os的一些信息--转
- A cost-effective recommender system for taxi drivers
- Python类的实例属性详解
- 剑指offer
- 瞬间从IT屌丝变大神——CSS规范
- html的视频插件 (转)
- python 实现词云
- pytest-allure-poco之allure全量详细用法
- 超大文本文件浏览器Snaptext,支持不限制大小的文本文件浏览
- 解决redis连接错误:MISCONF Redis is configured to save RDB snapshots, but it is currently not able to...
- Java的内省机制
- 面向服务的体系架构(SOA)
- windows怎么与虚拟机linux共享
- 阻止ARP欺骗
- STL::array
- JDBC结果集
- 织梦dedecms模板制作时,循环递增autoindex使用方法整理
- MT【146】一边柯西,一边舍弃
- spring mvc对异步请求的处理
- BigDecimalUtils BigDecimal加减乘除
热门文章
- 全文搜索(AC-1)-互联网信息过载问题
- HDU 2647 逆向拓扑排序
- 搜索 比MySQL快10倍?这可能是目前AWS Aurora最详解读!
- Linux操作系统下IPTables配置
- [bzoj3879]SvT_后缀数组_RMQ_单调栈
- springboot技术
- Ubuntu 16.04设置rc.local开机启动命令/脚本的方法(通过update-rc.d管理Ubuntu开机启动程序/服务)
- Windows 10+Ubuntu 16.04在MBR分区上安装双系统之后启动菜单的System Setup选项提示:can&#39;t find command ";fwsetup";
- Java 代理模式和装饰者模式的区别
- java IO流之三 使用缓冲流来读写文件