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