说说你对ReactHooks的理解？它解决了什么问题？1、什么是Hook？这是React16.8的新特性。它允许您在不编写类的情况下使用状态和其他React功能。至于为什么引入hooks，官方的动机是为了解决react在长期使用和维护中经常遇到的问题，比如：组件复用和共享困难状态复杂的组件开发和维护困难-相关逻辑逻辑。当我们的组件需要处理多个不相关的局部状态时，每个生命周期函数可能包含各种不相关的逻辑在类组件内部的this增加了学习成本，基于现有工具对类组件的优化也存在一些问题。由于业务变化，功能组件不得不改为类组件等。功能组件过去也被称为无状态组件，只负责一些渲染工作。因此，当前功能组件也可以是有状态组件，也可以维护自己的状态，在内部做一些逻辑处理。二、上面说的是什么，Hooks让我们的功能组件具备了类组件的特性，比如组件中的state和生命周期中最常见的hooks如下：useStateuseEffect其他useState先举个例子如下：从'react'导入React，{useState}；functionExample(){//声明一个名为“count”的状态变量const[count,setCount]=useState(0);return(
你点击了{count}次
setCount(count+1)}>点击我);}在函数组件，useState用于维护函数的内部状态。参数是状态的默认值，返回值是一个数组。第一个值是当前状态，第二个值是更新状态的函数。函数组件等价于类组件如下：classExampleextendsReact.Component{constructor(props){super(p绳索）；this.state={count:0};}render(){return(
你点击了{this.state.count}次
this.setState({count:this.state.count+1})}>点我);}}从上面两段代码的分析可以看出两者的区别：状态声明方式：在函数组件中，直接通过useState获取，而在类组件中，在构造函数中设置状态读取方式：在函数组件中直接使用变量，在类组件中通过this.state.count获取状态。update方法：在函数组件中，通过setCount更新，类组件使用this.setState()一般useState使用起来更简洁，减少this指向useEffect的歧义useEffect允许我们在函数组件中进行一些有副作用的操作并且还给出了一个计时组件的例子：classExampleextendsReact.Component{constructor(props){super(props);this.state={count:0};}componentDidMount(){document.title=`你点击了${this.state.count}次`;}componentDidUpdate(){document.title=`你点击了${this.state.count}次`;}render(){return(
你点击了{this.state.count}times
this.setState({count:this.state.count+1})}>点击我);}}从上面可以看出，组件在加载和更新阶段执行相同的操作。如果使用useEffect，同样可以提取出同样的逻辑。这是类组件所没有的方法。对应的useEffect示例如下：importReact,{useState,useEffect}from'react';functionExample(){const[count,setCount]=useState(0);useEffect(()=>{document.title=`您点击了${count}次`;});return(
你点击了{count}次
setCount(count+1)}>点击我);}先使用Effect参数接受一个Callback函数，前端训练默认会在第一次渲染和更新后执行useEffect，相当于在componentDidMount和componentDidUpdate这两个生命周期函数中如果两次重新调用之间没有出现某个特定值时执行回调效果图变化，可以跳过effect的调用，此时只需要传入第二个参数，如下：useEffect(()=>{document.title=`Youclicked${count}times`;},[数数]）;//只在count变化的时候更新上面提到的第二个参数，如果count的值为5，当我们的组件重新渲染的时候count还是等于5，React会将上一个渲染的[5]与下一个渲染的[5]进行比较。如果它们相等，则跳过效果执行。回调函数中可以返回一个清除函数，这是一个可选的effect清除机制，相当于class组件中的componentwillUnmount生命周期函数可以做一些去除副作用的操作，如下：useEffect(()=>{functionhandleStatusChange(status){setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(props.friend.id,handleStatusChange);return()=>{ChatAPI.unsubscribeFromFriendStatus(props.friend.id,handleStatusChange);};});所以，useEffect相当于componentDidMount、componentDidUpdate和componentWillUnmount这三个生命周期函数的组合，其他hook在组件通信过程中可以使用useContext，我们在refs学习中也是使用useRef来获取DOM结构的。。。有还有很多额外的hook，比如：useReduceruseCallbackuseMemouseRef3.解决什么问题通过上面的初步了解，可以看出hooks可以更容易的解决状态相关的复用问题：每次调用useHook都会产生一个独立的状态。自定义钩子可以更好的封装我们的功能。将钩子编写为函数式编程。每个功能都包裹在一个函数中，整体风格更加清爽，更优雅的hooks的出现，扩展了函数组件的功能，具有类组件类似的功能。在我们日常使用中，使用hooks可以解决大部分问题，而且还有代码复用机制，所以优先考虑hooks
