React Hooks

视频课程

1. React Hook/Hooks是什么

• Hook是React 16.8.0版本增加的新特性/新语法
• 可以让你在函数组件中使用state以及其他的React特性

2. 三个常用的Hook

• State Hook：React.useState()
• Effect Hook：React.useEffect()
• Ref Hook：React.useRef()

3. 注意事项

官方文档使用规则

• hook 不能在类组件中使用。
• 只能在函数最外层调用Hook，不要在循环、条件判断或者子函数中调用；
  
• 只能在React的函数组件中调用Hook，不要在其他Javascript函数中调用。

4. State Hook

• State Hook让函数组件也可以有state状态，并进行状态数据的读写操作；
• 语法： const [xxx, setXxx] = React.useState(initValue)
  • useState传入的initValue是当前state的初始值；
  • 在后续的重新渲染中，useState返回的第一个值将始终是更新后最新的state。
• useState()说明：
  • 参数：第一次初始化指定的值在内部作缓存；
  • 返回值：包含2个元素的数组，第1个为内部当前状态值，第2个为更新状态的函数。
• setXxx()的2种写法：
  • setXxx(newValue)：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值；setCount(count+1)
  • setXxx(value => newValue)：参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值。setCount(count => count+1)(完成的函数写法：setCount((count) => {return count+1}))

import React, { useEffect, useState } from "react";

function Counter() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);
  const [name, setName] = useState('allen');

  useEffect(function updateTitle() {
    document.title = name + count;
  })

  const decrement = () => {
    if (count > 4) {
      return count - 1
    } else {
      return count
    }
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        加1
      </button>
      <button onClick={() => setCount(decrement)}>
        大于4后减1
      </button>
    </div>
  );
}

export default Counter

如果定义的初始数据是引用类型，更新的时候使用函数式更新结合扩展运算符(...)

  const [teacher, setTeacher] = useState({name: 'allen', age: 18});
  
  const chageName = () => {
    setTeacher(() => {
      return {
        ...teacher,
        name: 'kevin'
      }
    })
  }

  const chageAge = () => {
    setTeacher(() => {
      return {
        ...teacher,
        age: 20
      }
    })
  }

  <p>{teacher.name}</p>
  <button onClick={chageName}>改名</button>
  <p>{teacher.age}</p>
  <button onClick={chageAge}>改年龄</button>

• useState惰性初始化
  initValue参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始state需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的state，此函数只在初始渲染时被调用。

5. Effect Hook

Effect Hook可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)。
useEffect()本身是一个函数，调用这个函数的时候，要传入一个函数。传入的这个函数，就相当于一个生命周期钩子。

• useEffect(() => {})，只传一个参数时，相当于监测所有值，只要组件中的值有改变，就运行传入的函数（组件挂载时也会执行）。
• useEffect(() => {}, [])，传入一个函数和一个[]时，相当于谁也不监测，只有组件挂载时才会执行传入的函数。
• useEffect(() => {}, [value])，传入一个函数和一个[value]时，相当于监测value，在组件挂载和value值改变时执行传入的函数。
• useEffect(() => {... return () => {}}, [value])

语法和说明：
useEffect(() => {}

useEffect(() => {
	// 在此可以执行任何带副作用操作
	return () => { // 在组件卸载前执行
		// 在此做一些收尾工作，比如清除定时器/取消订阅等
	}
}, [stateValue])  // 如果指定的是[]，回调函数只会在第一次render()后执行

可以把useEffect Hook 看作如下三个函数的组合：

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

6. RefHook

Ref Hook 可以在函数组件中存储/查找组件内的标签或任意其他数据
语法： const refContainer = useRef()
作用：保存标签对象，功能与React.createRef()一样。