react hooks的理解

面试必备！

useState:状态管理

useState有两个状态，一个是status，一个是setStatus

setStatus修改数据后，会触发<App/>的re-render

re-render:重新渲染，re-render并不意味着dom会更新，re-render是react自身执行一系列的组件自身生命周期，render,虚拟dom之间diff之后，如果dom发生变化，则更新新的dom，如果没有变化则不更新。

以下情况会导致re-render：

组件内部state变化：无论这个声明的state在组件的render中是否使用，state的变化都会导致组件自身及其子节点的re-render；
组件的props变化：这是站在子组件的角度上得出的结论，而子组件props变化来源于父组件的state，究其根本，还是组件内部state发生了变化；
用户交互事件触发或者接口请求数据响应；
组件订阅的context发生变化：组件订阅的context发生变化，是由于provider中的state发生了变化，同理，还是因为state发生变化导致的re-render
父组件的render：父组件render，子组件就会re-render.除非子组件是一个纯组件（纯组件：即他的props没有发生变化，那么他就不会更新，可以使用React.memo(),React.PureComponent将组件变为纯组件。）

如何避免不必要的re-render?
使用类组件PureComponent：引入PureComponent，在需要用到Component的地方修改为PureComponent
import {PureComponent} from 'react';
export class Root extends PureComponent{
...
}//或者直接继承
//export class Root extends React.PureComponent{...}
使用函数组件Memo：父组件中修改state时，下面这个子组件如果没有用到这个state，则不会re-render
import { memo } from "react"
const Memodemo=({props,children})=>{console.log('Memodemo')return <><p>这里用的是memo</p></>}export default memo(Memodemo)
利用高阶组件shouldComponentUpdate

useEffect：

useEffect接受两个参数，第一个参数是一个函数，必传，可以看作componentDidMount、componentDidUpdate、componentWillUnmount这三个函数的组合

useEffect中第一个参数如果添加了return返回一个函数，切换路由时，就会执行这个return返回的函数，相当于componentWillUnmount。

第二个参数可以不传或者传一个数组

那么useEffect会出现以下四种使用情况：

不传递第二个参数，当前组件每次渲染都会执行，包括state的每次更新都会触发useEffect
```
useEffect(()=>{console.log('useEffect')}
)
```
第二个参数传递空数组:只在挂载和卸载的时候执行
```
useEffect(()=>{
console.log('useEffect[]')
},[])
```

第二个参数传递一个值

useEffect(
()=>{
console.log('当page发生修改的时候,会输出此行');
},[page])

第二个参数传递多个值：数组中的任意一个或者多个发生变化，useEffect都会重新运行一次；
```
useEffect(()=>{console.log('useEffect');
},[level,level1])
```

componentDidMount ：react在组件添加到屏幕上（挂在）后调用它，一般用于进入页面后，数据初始化

componentDidUpdate：页面中的state或者model中的state定义的变量发生了变化，这个方法就会执行；

componentWillUnmount：组件被移除屏幕（卸载）之前调用

这三个类生命周期和useEffect等同方式，看下面代码：

//类生命周期
class Example extends React.Component{constructor(props){super(props);this.state={count:0,dateNow:''}}componentDidMount(){    console.log('当前count=',this.state.count)this.timeFlag=setInterval(()=>{this.setState.dateNow=new Date()})}componentDidUpdate(){console.log('当前更新为count=',this.state.count)}componentWillUnmount(){clearInterval(this.timeFlag)}render(){return(<div><p>当前count={this.state.count}</P><p>当前时间={this.state.dateNow}</P><button onClick={()=>{this.state.count=this.state.count+1}}>count+1</button></div>)    }
}

//上面的类生命周期代码，等同于下面的代码
import {useState,useEffect} from 'react';
const Example=()=>{const [count,setCount]=useState(0);const [dateNow,setDateNow]=useState('');
//下面这一行没有写第二个参数，所以，当state中的变量发生变化时，这里的useEffect就会调用useEffect(()=>{console.log('当前count=',count)})
//这一行只有count发生变化，才会调用useEffectuseEffect(()=>{ console.log('当前更新为count=',count)},[count])uesEffect(()=>{const timeFlag=setInterval(()=>{setDateNow(new Date())        })return()=>{clearInterval(timeFlag)}},[])return(<div><p>当前count={count}</P><p>当前时间={dateNow}</P><button onClick={()=>{setCount(count+1)}}>count+1</button></div>)
}