State Hook 与 Effect Hook 的运用

川长思鸟来 2023-03-01 06:25 42阅读 0赞

### 目录 ###

*  Hook 是什么？
 *  State Hook
 *  Effect Hook

# Hook 是什么？ #

`Hook` 是一个特殊的函数，可以使你不编写类组件的情况下使用`state`以及其他`React`的特性。

# State Hook #

import React, {  useState } from 'react';
    function Example(){ 
    	
    	// 创建一个变量count，创建一个改变变量count的方法setCount,并且设置变量初始值为0;
    	const [count, setCount] = useState(0);
    
    	return (
    		<div>
    			<p>当前点击了{  count }次</p>
    			<button onClick={ () => setCount(count + 1)}>点击</button>
    		</div>
    	)
    }
    export default Example;

`State Hook` 就是可以使用`state`的状态，调用`useState`方法时创建一个变量`count`，创建一个改变变量`count`的方法`serCount`,并且设置变量初始值为`0`；为绑定按钮单击事件并且设置每次执行`setCount`函数时`count`自加`1`；并且值得一提的是你不同定义多个`state`变量，`state`已经很好的存储数组和对象。

# Effect Hook #

import React, {  useState, useEffect } from 'react';
    function Example(){ 
    	
    	const [count, setCount] = useState(0);
    
    	useEffect(() => { 
    		document.title = `点击了${ count }次`
    	})
    
    	return (
    		<div>
    			<p>当前点击了{  count }次</p>
    			<button onClick={ () => setCount(count + 1)}>点击</button>
    		</div>
    	)
    }
    export default Example;

在每一次数据更新完成渲染后（`componentDidUpdate`）包括挂载完成后（`componentDidMount`），窗口的标题都需要进行改变，这个时候我们可以使用`Effect Hook` 实现，而`useEffect`函数就是帮你完成了`componentDidUpdate`和`componentDidMount`生命周期函数。