钩子怎么在反应中使用

useState是自反应带的一个钩函数,它的作用就是用来声明状态变量.useState这个函数接收的参数是我们的状态初始值(初始状态),它返回了一个数组,这个数组的第[0]项是当前当前的状态值,第(1)项是可以改变状态值的方法函数。
所以我们做的事情其实就是,<代码>声明了一个状态变量统计,把它的初始值设为0,同时提供了一个可以更改数的函数setCount>

当用户点击按钮时,我们调用setCount函数,这个函数接收的参数是修改过的新状态值。接下来的事情就交给了反应,反应将会重新渲染我们的例子组件,

<强>假如一个组件有多个状态值怎么办?
首先,<代码> useState是可以多次调用的> function  ExampleWithManyStates (), { 　　(年龄,,,const  setAge],=, useState (42); 　　(水果,,,const  setFruit],=, useState(& # 39;香蕉# 39;); 　　(待办事项,const ,, setTodos],=, useState([{,文字:& # 39;Learn 钩子# 39;,})); 　　}

其次,useState接收的初始值没有规定一定要是字符串/数字/布尔这种简单数据类型,它完全可以接收对象或者数组作为参数。唯一需要注意的点是,之前我们的。设置状态做的是合并状态后返回一个新状态,而<代码> useState是直接替换老状态后返回新状态>

钩,一方面它是直接用在函数当中,而不是类;另一方面每一个钩都是相互独立的,不同组件调用同一个钩也能保证各自状态的独立性。

<强>反应是怎么保证多个useState的相互独立的?

答案是,<代码>反应是根据useState出现的顺序来定的> //第一次渲染 　　,useState(42);年龄,//将初始化为42 　　,useState(& # 39;香蕉# 39;);,//将水果初始化为香蕉 　　,useState([{,文字:& # 39;Learn 钩子# 39;,}]);,//? 　　 　　,//第二次渲染 　　,useState(42);,//读取状态变量年龄的值(这时候传的参数42直接被忽略) 　　,useState(& # 39;香蕉# 39;);,//读取状态变量水果的值(这时候传的参数香蕉直接被忽略) 　　,useState([{,文字:& # 39;Learn 钩子# 39;,}]);,//?/pre>

反应规定我们必须把钩子写在函数的最外层,不能写在ifelse等条件语句当中,来确保钩子的执行顺序一致。

效果挂钩

案例:

 class  Example  extends  React.Component  {
　　,构造函数(道具){
　　超级才能(道具);
　　this.state 才能=,{
　　,,数:0
　　,,};
　　,}
　　
　　,componentDidMount (), {
　　document.title 才能=,'你clicked  $ {this.state.count},时报》;
　　,}
　　
　　,componentDidUpdate (), {
　　document.title 才能=,'你clicked  $ {this.state.count},时报》;
　　,}
　　
　　,使(){
　　return 才能;
　　,,& lt; div>
　　,,,& lt; p>你clicked  {this.state.count}, times

　　,,,& lt; button  onClick={(),=祝辞,this.setState({,数:this.state.count  +, 1,})}祝辞
　　,,,,Click 我
　　,,,& lt;/button>
　　,,& lt;/div>
　　,,);
　　,}
　　}