本文主要是介绍React-Hooks useState,useEffect用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
定义
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
useState
通过在函数组件里调用它来给组件添加一些内部 state。useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。useState 唯一的参数就是初始 state。这个初始 state 参数只有在第一次渲染的时候会被用到。
使用useState可以声明多个state变量。
不使用useState的时候，我们会发现一个最麻烦的问题，就是要去维护this，因为我们知道，每一个class类的this，都是要从父组件继承的，本身是没有this的，所以需要使用constructor去初始化this。
而useState，让我们使用函数编程，我们之前写无状态组件的时候，用的就是函数编程，而使用useState之后，我们可以在函数编程里面使用状态。也就是说：count变成了函数里面的变量，setCount变成了函数里面的函数变量，那么使用的时候直接使用就行了，不再需要使用this
useState接收一个参数，返回的是一个数组，参数表示初始值，数组的第0项就是定义的变量，第1项就是改变变量的方法。
参数可以是基本数据类型，如string、number，也可以是复合数据类型，如array，object等，如下代码
import React, { useState } from 'react'
export default function App() {const [count, setCount] = useState(0)const [obj, setObj] = useState({name: "aaa"})const [arr, setArr] = useState([1,2,3])return (<div><div>{count}</div><button onClick={() => { setCount(count + 1) }}>add</button><div>{obj.name}---{obj.age}</div><button onClick={() => { setObj({...obj,age: 20,name: "bbb"}) }}>add</button>{arr.map(item => {return <div>{item}</div>})}<button onClick={() => { setArr([...arr, 4]) }}>add</button></div>)
}
基本数据类型，可以直接修改，而复合数据类型，需要先通过解构运算符，然后再设置成新的复合数据类型。
useEffect
useEffect （副作用函数）是一个 Effect Hook，给函数组件增加了操作副作用(在 React 组件中进行数据获取、订阅或者手动修改 DOM等)的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API，默认情况下，React 会在每次渲染后调用副作用函数 ，包括第一次渲染的时候。
通过使用 Hook，你可以把组件内相关的副作用组织在一起（例如创建订阅及取消订阅），而不要把它们拆分到不同的生命周期函数里。
useEffect接收一个函数作为参数，会在页面加载完成的时候以及数据更新的时候，触发执行。
上面实例每次重新渲染都要执行一遍useEffect，如果你在useEffect中使用了useState则会导致无限循环，这样显然是影响性能的。为了处理这个问题，我们可以给useEffect传第二个参数。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（即第一个参数）。
当我们第二个参数传一个空数组[]时，相当于只在首次渲染的时候执行。
import React,{Component, useState,useEffect} from 'react'
import './App.css';class App2 extends Component{state = {count:0,size:{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,}}onResize=()=>{this.setState({size:{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,}})}componentDidMount(){document.title = this.state.count;window.addEventListener('resize',this.onResize);}componentWillUnmount(){window.removeEventListener('resize',this.onResize);}componentDidUpdate(){document.title = this.state.count;}render(){const {count,size} = this.state;return (<button type="button" onClick={()=>{this.setState({count:count+1})}}>click{count}size:{size.width}*{size.height}</button>);}
}function App(props) {// const [count,setCount] = useState(()=>{// //提供一个函数，提高初始效率// return props.defaultCount||0// });const [count,setCount] = useState(0);const [size,setSize] = useState({width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,})const onResize = ()=>{setSize({width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,})}useEffect(()=>{ //我们传递了第二个参数为一个空数组，它表示不监听任何数值，那么useEffect就只会在页面加载完成的时候触发一次，而count更新的时候不会触发。如果想要count更新的时候触发，则在数组内添加参数console.log('count',count)},[count])//useEffect统一在渲染后调用useEffect(()=>{ //didmount，didupdatedocument.title = count;})//每次渲染后都运行，加一个【】，绑定的函数只会发生在第一次渲染后，并且在组件卸载之前才会运行绑定函数
//我们都知道定时器在页面销毁的时候，需要清除，我们一般都会在componentUnMount，页面销毁的时候去把定时器清除，那么使用useEffect是如何清除呢？其实很简单，只需要在第一个参数的函数里面，return一个函数，函数里面写清除的方法就行了。这样在页面被卸载的时候，就会把定时器清除useEffect(()=>{ //didmount，willUnmountwindow.addEventListener('resize',onResize);return ()=>{window.removeEventListener('resize',onResize);}},[])const onClick=()=>{console.log('click');}useEffect(()=>{ document.querySelector('#size').addEventListener('click',onClick,false)return ()=>{ //清理状态，获取最新状态document.querySelector('#size').removeEventListener('click',onClick,false)}})return (<><button type="button" onClick={()=>{setCount(count+1)}}>click{count}</button>{count%2?<span id="size">size:{size.width}*{size.height}</span>:<p id="size">size:{size.width}*{size.height}</p>}</>);
}export default App;//在使用useEffext处理title和size的时候，写了两个useEffect，不同的逻辑做不同的事情，这就是关注点分离
// 1、提高了组件复用
// 2、优化了关注点分离
// 两个函数的区别在于第二个参数，空数组，是精髓，只有数组的每一项都不变，所以只有第一次被渲染的时候才会被调用
这篇关于React-Hooks useState,useEffect用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
