持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

前言

Hooks是react V16.8.0之后新增的语法，可以不写类组件的情况下用函数组件中使用 state 以及其他的 React 特性。可以说简化了很多的代码。少了很多的心智负担，再不用注意那些烦人的this指向，箭头函数等问题。

常用的Hook函数

我们从常用的Hook函数中了解Hook带来的编写，看看在使用函数组件来简化替换类组件中的问题

React.useState

分别以类组件和函数式组件来完成一个按钮点击事件，改变页面显示

函数式组件

useState函数有一个参数, 这个参数的值表示状态的默认值
useState函数的返回值第一个为状态的值，第二项为函数

import React, { useState } from 'react';

function App() {
    const [ num ,setNumber ] = useState(1)  //解构赋值，num设置默认值为0 ，setNumber为
    function show() {
        setNumber(num+1)
    }
    return (
        <div>
            <button onClick={show}>显示：{ num }</button>	
        </div>
    );
}
export default App;

效果：

函数式组件

export default class App extends React.Component{
state={
        num:0
    }
show=()=>{
        this.setState({ state:this.state.num+1 })
}

render(){
    const { num } = this.state
    return <div>
        <button onClick={ this.show } >显示：{ num}</button>
    </div>
}

React.useEffect

在函数式组件中监控变量，类似于生命周期函数检测变量变化
最简单用法：

函数式组件

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


function App() {
	const [num, setNumber] = useState(1)  //解构赋值，num设置默认值为0 ，setNumber为
	useEffect(() => {
		console.log(num)
	}, [num])

	function show() {
		setNumber(num + 1)
	}
	return (
		<div>
			<button onClick={show}>显示：{num}</button>
		</div>
	);
}
export default App;

效果：

useEffect接收两个参数，第一个参数存放影响的变量逻辑处理函数，第二个参数是一个数组，数组存放监控的变量 这相当于类式函数中的componentWillupdate钩子函数

• 第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行，最重要的功能

• 第二个参数可以不传，不会报错，但会无限循环执行逻辑处理函数。所以使用时最要要写个空数组。

• 第二个参数只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次，相当于类式组件中的componentDidMount生命周期钩子函数用法

• 第一个参数可以返回一个回调函数，这个回调函数将会在组件被摧毁之前和再一次触发更新时，将之前的副作用清除掉。类式组件中的componentWillUnmount生命周期钩子函数用法

主要是模拟类组件函数中的生命周期钩子函数。

React.useRef

使用这个Hook函数可以在函数式组件中储存在组件内的标签或者其他数据。
直接看代码：

函数式组件

import React, { useState, useEffect,useRef } from 'react';


function App() {
    const [num, setNumber] = useState(1)  //解构赋值，num设置默认值为0 ，setNumber为
    useEffect(() => {
        console.log(showRef.current.value);
    }, [num])

    const showRef = useRef();
    function show() {
        setNumber(num + 1)
    }
    function showRefData(){
        alert(showRef.current.value)
    }
    return (
        <div>
            <input ref={showRef}/>
            <button  onClick={show}>显示：{num}</button>
            <button  onClick={showRefData} >展示ref数据</button>
        </div>
    );
}
export default App;

效果：

总结

React 函数式组件Hook经常使用的三种函数学完了，果然比类式组件简单很多，少些很多代码，优点非常明显，所以现在非常地流行这种写法。