React学习之路三,（常用hook之useState,useEffect）

目前用react写了几个查询页面,也算实战当做练习了吧，使用到的hooks也就只有useState,useEffect,useForm，这次先记录一下我对前两个hook的理解（可能理解不足，欢迎大牛们提意见）

一、什么是hook

hook翻译为钩子，它的含义是指如果你想使用某些方法，就可以使用钩子将他钩进你的组件中，我目前觉得这里的钩子其实就是定义了一些常用的方法，然后在函数组件中使用它。(注:只能在函数组件中使用这些钩子。)

二、useState

状态钩子：用于为函数组件引入状态（state），纯函数不能有状态，所以把状态放在钩子里面。（这个钩子可以看做全局变量，因为useState是跨整个组件的生命周期的，这个“状态”其实可以存储任意类型的数据，数组、对象等都是可以的，并且可以在组件执行某些事情的时候重新赋予它新的状态）废话不多说直接上实践代码（附用法）：

<div id="test"></div>
<script type="text/babel"> 
	/**
	 * 函数定义的按钮组件
	 */
	function Button() {
		/**
		 * 使用useState定义两个该组件的全局变量buttonText，num（状态钩子）
		 * buttonText：按钮上的显示内容 
		 * setButtonText:更改buttonText内容（状态）的函数
		 * num:点击次数
		 * setNum：更改num内容（状态）的函数
		 */
		const [buttonText,setButtonText] = React.useState('初始化内容');
	    const [num,setNum] = React.useState(0);
	  
	    // 设置一个点击事件，每次点击时更新它的内容
	    const Onclick = ()=>{
	    
		    // 设置num = num+1（）更改num的状态
   			setNum(num=>num+1);
   		
	   		/**
	   		 * 由于上述代码并不会立即改变num的数值因此我们需要显示的点击次数还需要+1
	   		 * buttonText内容更改后会自动刷新组件的显示内容
	   		 */
   			setButtonText('第'+(num+1)+'次点击');
   		
	    }
	    
	    // 这里是页面上看到的内容
		return(
    		 <div style={{padding:'50vh 0 0 50vw'}}>
	            <button onClick={()=>Onclick()}>{buttonText}</button>
	        </div>
    	)
	}
	/**
	 * 
	 */
	renderUnit(<Button/>,'test');
</script>

演示结果

三、useEffect

官网说的是Effect Hook 可以让你在函数组件中执行副作用操作，那么什么是副作用呢？
概括地讲，只要是跟函数外部环境发生的交互就都是副作用。那么重点来了，【发生交互】这个我们很熟悉，向后端发送请求不就是一次交互吗？因此我们的请求代码可以写在useEffect里面。
实践代码（附用法）：

<div id="test"></div>
<script type="text/babel"> 
	function App() {
		
		// 初始化count = 0
	    const [count,setCount] = React.useState(0);
	   
	    /**
	     * effect(params1，params2)
	     * @params1 函数，请求代码放在这里
	     * @params2 依赖，初始化以及当依赖改变时执行params1
	     */
	    React.useEffect(() => {
	    	// 这里模拟ajax请求
	   		setTimeout(()=>{
	   			
	   			// 模拟从后台获取到数据后进行赋值
	   			setCount(count+1);
	   		}, 1000);
	   		
	    },[count]);
	    
	    return (
	   
	        <div style={{padding:'50vh 0px 0px 50vw'}}>
	            <h1>当前count值为：{count}</h1> 
	        </div>
	    )
		}
	ReactDOM.render(<App/>,document.getElementById('test'))
</script>

结果演示