将UI组件抽象为状态处理机。分为普通状态和副作用状态。

一、综述

useState:处理函数只改变引用的状态本身;
副作用状态:会对引用状态以外的状态和变量进行修改;
useReducer:用解藕化的机制进行计算状态维护;

二、useState

useState:flux化管理的模块状态(本模块持有)
const [user, setUser] = React.useState({});
const [loading, setLoading] = React.useState(false);
const { user, loading } = useFetchUser(props.visible);

三、useEffect

useEffect:会对引用状态以外的状态和变量进行修改

提示: 使用多个 Effect 实现关注点分离

使用 Hook 其中一个目的就是要解决 class 中生命周期函数经常包含不相关的逻辑,但又把相关逻辑分离到了几个不同方法中的问题。

function useFetchUser(visible) {
React.useEffect(() => {}, [visible]);
}

function RandomUserModal(props) {
React.useEffect(() => {setLoading(true);}, [props.visible]);
}

在函数组件主体内(这里指在 React 渲染阶段)改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的,因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。
使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。
默认情况下,effect 将在每轮渲染结束后执行,但你可以选择让它 在只有某些值改变的时候 才执行。

讲一个处理函数和一个观察状态绑定,状态发生变化时,执行处理函数;
虽然 useEffect 会在浏览器绘制后延迟执行,但会保证在任何新的渲染前执行。React 将在组件更新前刷新上一轮渲染的 effect。

四、useContext:

全局引用的用户状态;

sharedConfigs;

四、useLayoutEffect

dom渲染前调整布局的回掉;

layoutsubviews;

五、状态盒子

讲组件看成是一个状态盒子:
1、对自身的状态进行管理;
2、对外部输入的副作用状态进行响应;

https://segmentfault.com/a/1190000017182184

六、useReducer

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法。(如果你熟悉 Redux 的话,就已经知道它如何工作了。)
在某些场景下,useReducer 会比 useState 更适用,例如 state 逻辑较复杂且包含多个子值,或者下一个 state 依赖于之前的 state 等。并且,使用 useReducer 还能给那些会触发深更新的组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数 。

const initialState = {count: 0};

function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'increment'})}>+</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
</>
);
}

react hooks沉思录的更多相关文章

  1. 【C++沉思录】句柄2

    1.[C++沉思录]句柄1 存在问题: 句柄为了绑定到Point的对象上,必须定义一个辅助类UPoint,如果要求句柄绑定到Point的子类上,那就存在问题了.2.有没有更简单的办法呢? 句柄使用Po ...

  2. 【C++沉思录】句柄1

    1.在[C++沉思录]代理类中,使用了代理类,存在问题: a.代理复制,每次创建一个副本,这个开销有可能很大 b.有些对象不能轻易创建副本,比如文件2.怎么解决这个问题? 使用引用计数句柄,对动态资源 ...

  3. 生活沉思录 via 哲理小故事(四)

    1.围墙里的墓碑 第一次世界大战期间,驻守意大利某小镇的年轻军官结识了镇上的牧师.虽然军官信仰信教,而牧师是天主教牧师,但两人一见如故. 军官在一次执行任务中身负重伤,弥留之际嘱托牧师无论如何要把自己 ...

  4. 生活沉思录 via 哲理小故事

    本文转载:http://www.cnblogs.com/willick/p/3174803.html 1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛, ...

  5. 通过 React Hooks 声明式地使用 setInterval

    本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...

  6. 初探React Hooks & SSR改造

    Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...

  7. React hooks实践

    前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...

  8. 理解 React Hooks

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...

  9. 生活沉思录 via 哲理小故事(一)

    1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛,但却是失明的. 原来,托蒂刚出生时,这只眼睛轻度感染,曾用绷带缠了两个星期.这对常人来说几乎没有人任何 ...

随机推荐

  1. 在vue-cli中安装element

    在vue-cli中安装elemnent-ui 的步骤 在安装vue-cli 的基础上进行安装 1.npm i element-ui -S 安装element-cli 安装之后会在项目中的node_mo ...

  2. 源码编译安装使用glusterfs+heketi安装使用

    注:使用源码安装的原因主要是使用yum安装glusterfs服务端时出现一些依赖库问题 准备3台glusterfs服务器(官方也建议至少3台,防止发生脑裂),并在各个服务器的/etc/hosts下面添 ...

  3. 升级最新版Rancher 2.2.6

    前言:之前采用离线方式部署好了 Rancher 2.2.4(https://www.cnblogs.com/weavepub/p/11053099.html),这次升级到最新版本 Rancher 2. ...

  4. Django 路由正则URL

    Django 路由正则URL URL1 # 路由 url(r'^detail/', views.detail) {#点击跳转到指定用户下显示信息#} <li><a target=&q ...

  5. English--状语从句

    English|状语从句 现在开始讲述关于状语从句的内容,由于内容略难并且略多,我将换个简单的方式帮助理解,这一块有些东西是需要记忆的.虽然是记忆,但是我可以保证记忆的内容是知识. 前言 目前所有的文 ...

  6. MFC 解决绘图时闪烁问题的一点经验

    2015-05 由于作图过于复杂和频繁,所以时常出现闪烁的情况,一些防止闪烁的方法,如下: (1)将Invalidate()替换为InvalidateRect(). Invalidate()会导致整个 ...

  7. 5.Javascript闭包得实现原理和作用

    闭包的实现原理和作用 1.闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数. 2.闭包的作用:访问函数内部变量.保持函数在环境中一直存在,不会被垃圾回收机制 ...

  8. windows 下安装 node 以及安装 git 指令使用

    一.先百度搜索 node 找 Download | Node.js 二.下载 Node 根据你自己的操作系统下载 三.安装 node (注意:如果安装失败,使用管理员身份打开安装) 四.安装成功之后 ...

  9. git 自定义log

    个人记录防止忘记 log别名: git config --global alias.lg=log --color --graph --pretty=format:'%Cred%h%Creset -%C ...

  10. 下载文件时-修改文件名字 Redis在Windows中安装方法 SVN安装和使用(简单版) WinForm-SQL查询避免UI卡死 Asp.Net MVC Https设置

    下载文件时-修改文件名字   1后台代码 /// <summary> /// 文件下载2 /// </summary> /// <param name="Fil ...