react hooks

1.useState—数据存储与更新

1.语法

const [state, setState] = useState(initialState)

2.语法说明

state为变量

setState为修改state值的方法

//引入 React 中的 useState Hook。它让我们在函数组件中存储内部 state。
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量，初始化为0
  const [count, setCount] = useState(0);
  return(
      <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      </>
  )

3.总结

• setState是异步执行的
• class中this.setState更新是state是合并， useState中setState是替换。

2.useEffect—忘记生命周期,记住副作用

1.说明

• 可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
• 副作用：数据获取、设置/销毁定时器、手动修改DOM都属于副作用
• 清除副作用：定时器/延时器

综上所述，useEffect就是监听依赖变化时，执行回调函数中的钩子函数

2.语法

useEffect(callback,deps)

useEffect(() => {
  //effect
  return () => {
    //cleanup
  }
}, [deps])