React Hooks

Posted 2021-11-04 遥岑.

目录

• 类组件与函数组件
• React Hooks中常用的钩子函数
• • useState()
  • useContext()
  • useReducer()
  • useEffect()

类组件与函数组件

React创建组件的方式有类组件和函数组件。

函数组件：

• 纯函数组件没有状态
• 纯函数组件没有生命周期
• 纯函数组件没有this

类组件功能齐全，但是代码很重，组件不够轻便。若使用函数组件，又没有状态管理。于是React团队设计了React Hooks，它的本质是增强的函数组件，即在函数组件中实现状态管理。

React Hooks中常用的钩子函数

不同的钩子为函数引入不同的外部功能，React Hooks约定，钩子一律使用use前缀命名
所以，自己定义的钩子都要命名为useXXX

useState()

状态钩子函数。
该函数的返回值是一个数组。
数组中第一个数据是一个变量，该变量接收useState函数的参数，并把这个参数作为状态的初始值。
数组中的第二个数据是一个函数，用来更新第一个变量的值（类似于类组件中的setState），该函数的命名约定为set开头，后跟第一个变量名。

//count的初始值为0
const [ count,setCount ] = useState(0);

useContext()

共享状态钩子。
作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。

const HookTest = ()=> {
    //创建全局的对象AppContext 初始值为{}
    const AppContext = React.createContext({})

    //定义子组件A
    const A = ()=> {
        //解构赋值 获取全局对象AppContext的值给name
        const {name} = useContext(AppContext)
        return (
            <p>子组件A：{name}</p>
        )
    }

    //定义子组件B
    const B = ()=> {
        const {name} = useContext(AppContext)
        return (
            <p>子组件B：{name}</p>
        )
    }

    return (
        <AppContext.Provider value={{name:'司凤'}}>
            <A/>
            <B/>
        </AppContext.Provider>
    )
}

useReducer()

useReducer()是一个基于Redux的Action的钩子函数

useEffect()

可以用来更好的处理副作用，如异步请求等，Hooks的useEffect()也是为函数组件提供了处理副作用的钩子。
在类组件中我们会把请求放在componentDidMount里面，在函数组件中我们可以使用useEffect()。

useEffect(() => {},[array])

• 第一个参数是要进行的异步操作
• 第二个参数是一个数组，用来给出Effect的依赖项，只要这个数组发生变化，useEffect()就会执行。（当第二项省略不填时，useEffect()会在每次组件渲染时执行。这一点类似于类组件的componentDidMount）