react hooks沉思录

将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>
</>
);
}