北京中科白癜风医院怎么样 http://bdfyy999.com/Hooks到底是个啥玩意儿？？？
你是不是有这样的疑惑？在你自认为已经了解了差不多React所有的内容的时候，Hooks就这么出现了。
这就是前端开发人员的日常，技术从未停止更新。
学习新东西是一件很棒的事情吗？当然是！但有的时候我们又不得不思考：”为什么要学它？这个新东西有啥意义？我是必须得学他吗？“。
针对Hooks而言，上面的这个问题答案是否定的，你不需要立马就学它。如果您一直在使用React，并且迄今为止一直在使用基于类的组件，那么就不必急于转向Hooks。Hooks是可选的，可以与现有组件配合使用。我相信当你因为要使用新东西而不得不重写整个代码库，你整个人都是崩溃的。
在函数组件中使用状态
在使用Hooks之前，我们不能在函数组件中使用状态。这就意味着，如果您有一个经过精心设计和测试的函数组件，突然需要存储状态，那么你就不得不把他重构为一个类组件。
牛逼的来了，Hooks让函数组件也能使用状态，就意味着我们不需要重构之前自己的写的代码，
类组件很笨重
我们不的不承认的是，类组件附带了太多的东西。constructor，binding，“this”无处不在。使用函数组件可以消除许多这种情况，能让我们的代码更容易维护。
可以在React文档中了解更多相关内容
更高的可读性
由于Hooks允许我们在函数组件中使用状态，因此和类组件相比，这意味同样的功能，我们写出来的代码会更好。这也会让我们的代码更具可读性。我们再也不用担心方法是不是绑定了this，也不必记住this之间的关系等等。我们可以专心写代码了。
ReactStateHook
状态，是React生态系统的基础。接下来我将通过介绍最常见的Hook——useState()来让大家初步了解Hooks。
我们先来看一下具有状态的类组件。
importReact,{Component}fromreact;import./styles.css;classCounterextendsComponent{state={count:this.props.initialValue,};setCount=()={this.setState({count:this.state.count+1});};render(){return(divh2Thisisacounterusingaclass/h2h1{this.state.count}/h1buttononClick={this.setCount}ClicktoIncrement/button/div);}}exportdefaultCounter;
有了ReactHooks之后，我们可以重写这个类组件并删除很多内容，使其更易理解
importReact,{useState}fromreact;functionCounterWithHooks(props){const[count,setCount]=useState(props.initialValue);return(divh2Thisisacounterusinghooks/h2h1{count}/h1buttononClick={()=setCount(count+1)}ClicktoIncrement/button/div);}exportdefaultCounterWithHooks;
代码变少了，但这到底是啥情况呢？
ReactStateSyntax
在上面的代码里，我们已经用到了人生中第一个ReactHook
const[count,setCount]=useState();
简单来讲，这里使用了数组的结构赋值。
useState()函数为我们提供了两个东西
/p>
*一个保存状态值的变量，在本例中称为count;*一个更改值的函数，在本例中称为setCount。
当然，你可以为这两个东西起任何你想要的名字。
const[myCount,setCount]=useState(0);
而且，你也可以在你的代码中像使用正常变量/函数一样去用他们。
functionCounterWithHooks(){const[count,setCount]=useState();return(divh2Thisisacounterusinghooks/h2h1{count}/h1buttononClick={()=setCount(count+1)}ClicktoIncrement/button/div);}
注意最上面的的useStateHook。我们声明、结构了2个东西：
counter：是用来保存状态的setCounter：是用来更改计数器变量的函数往下看代码，您会看到这一行：
h1{count}/h1
这是一个使用Hooks变量的例子。在JSX中，我们将count变量放在{}中，然后作为JavaScript执行它，最后将count的值将展示在页面上。
我们来对照一下我们之前在类组件中使用状态的方式：
h1{this.state.count}/h1
你会发现，我么再也不需要
