React HOOK 详解

useState:

1
2
3
4
5
6
7
8
9
10
const [count, setCount] = useState(0);

const [count, setCount] = useState(()=>0);
// 这两种初始化方式 是相等的,但是在函数为初始值时会被执行一次

const [count, setCount] = useState(()=>{
    console.log('这里只会在初始化的时候执行')
    // class 中的 constructor 的操作都可以移植到这里
    return 0
});

useEffect:

语法:

1
function useEffect(effect: EffectCallback, deps?: DependencyList): void;

deps 必须是一个数组,但是如果是一个空数组时:

1
2
3
useEffect(()=>{
    console.log('效果等同于 componentDidMount')
},[])

即使有 deps ,他在初始化时也会触发一次

经典案例：

1
2
3
4
5
6
useEffect(() => {
  console.log('在 dep 改变时触发,若无 dep 则,每次更新组件都会触发')
  return () => {
    console.log('在组件 unmount 时触发')
  };
});

与 setState 形成回调函数:
在useState-setState 中提到, class 中 setState 都是有回调的,而在 hooks 中 通过 useEffect 同样也可以实现它的效果

关于object 的实验

将回调值设置为一个在 function 外面的 object:

1
let deps = {grewer: 1}

在点击按钮时:

1
2
deps.grewer = deps.grewer + 1;
console.log(deps)

可以发现:
deps.grewer 的值在变化,但是 effect 却没有触发
而这样设置值时:

1
deps = {grewer: deps.grewer + 1};

每次都会触发 effect 函数
再次试验:

1
deps = Object.assign({}, deps)

同样地 每次都会触发 effect 函数

得出结论:

当依赖值为 object 时, 他的值引用发生变化就会触发 effect 的更新–
但是如果只是对象里某个值变化而引用不变化,effect 依旧不会触发
关于 function 的试验结论:
如果初始值为 function, 而将其改为数字等,会触发 effect
function 也是一个对象,当我们添加一个值在上面时,他的 effect 也不会触发
引用为一个新函数时,他每次都会触发;

原始链接： https://www.wxh520.xyz/2019/03/23/hook/

赏
× 请我吃糖~
打赏二维码