React-Hook-useState、useEffect、useRef

一、 什么是Hook？

1. Hook是React 16.8.0版本增加的新特性/新语法

2. 可以让你在函数组件中使用 state 以及其他的 React 特性

二、 3个常用的Hook

1. State Hook: React.useState()

2. Effect Hook: React.useEffect()

3. Ref Hook: React.useRef()

三、State Hook – useState()

• 该hook接收一个初始状态值，用于组件初次加载展示，返回值在解构以后，有两个，一个是表示状态的属性名，另一个是改变状态属性值的方法，内部用来setState

const  [initialState, changeStateMethod] = useState(0)
  # 由于函数的this的问题，所以使用箭头函数
  const changeValue = () => {
    changeStateMethod(initialState + 1)
  }

• 在实际使用中，组件初次挂载，展示的是变量StateAttribute的初始化的值initialStateValue，当有事件触发changeStateMethod方法的执行，方法内部也改变了StateAttribute的值，就会引起组件的初始值的改变
• 页面重新渲染除useState外的其他普通函数会被重新执行一遍，并不会想useState那样具有记忆功能。

四、Effect Hook – useEffect()

• 该hook接收两个参数，第1个参数是一个函数，第2个参数是一个数组且可以忽略不写
• 当第2个参数为空（不写）时，代表第1个参数的函数，在该组件初次挂载，以及后续的每一次更新时都执行该函数，相当于类式组件的componentDidMount() 和 componentDidUpdate()

useEffect(()=> {
    console.log("123")
  },[]);

• 当第2个参数的组数内有具体的一个变量或者组件时，代表只监控该变量或组件，只有该变量或者组件发生变化时，才会执行第1个参数的函数
• 当第2个参数的数组内为空时，代表参数1的函数的执行不依赖于任何一个组件，只在组件初次挂载的时候执行一次，相当于componentDidMount()
• 当第1个参数的函数返回值时一个函数时，那么将会在该组件卸载时，执行该返回值的函数，相当于componentWillUnmount()

五、 Ref Hook – useRef()

• 该hook用于获取某节点的值，相当于类式组件的createRef()
  

• 可以在函数组件中存储/查找组件内的标签或任意其它数据