React---Hooks(钩子)

类组件与函数组件的区别

• 类组件需要继承 class，函数组件不需要；
• 类组件可以访问生命周期方法，函数组件不能；
• 类组件中可以获取到实例化后的 this，并基于这个 this 做各种各样的事情，而函数组件不可以；
• 类组件中可以定义并维护 state（状态），而函数组件不可以；

useState使用的是数组而不是对象

• 数组：返回数组可以直接根据顺序解构
• 对象：结构对象时需要和useState内部返回的对象同名，多次，需要设置别名才能使用返回值

useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要定义别名了。

useState批量更新处理方式

函数组件批量更新策略

• 针对直接传参形式：后面的会覆盖前面的

function Test(){
 const [count setCount] = useState(1)
 const btn = ()=>{
  setCount(1)
  setCount(2)
 }
 return <div>{count}</div> // 输出的值为2
}

• 针对函数形式：函数手机，依次执行

function Test(){
 const [count setCount] = useState(1)
 const btn2 = ()=>{
  setCount(prev => prev+1)  // 1 + 1 = 2
  setCount(prev => prev+2)  // 2 + 2 = 4
 }
 return <div>{count}</div> // 输出的值为4
}

React Hooks解决了哪些问题

• 组件之间的复用状态

React Hooks开发中注意的问题和原因

• 不在循环、判断条件或嵌套函数中调用Hook,可能会导致调用顺序发生变化，必须要在React函数的顶层使用Hook。
• 函数组件中，使用useState时，在更改数组时，采用析构方式

function Test(){
  let [num,setNums] = useState([0,1,2,3])
  const addNum = () =>{
    num = [...num,4]
    setNums(num)
  }
}

• useState设置状态时，只有第一次生效，后期需要更新状态，需要使用useEffect。