【react】react18的学习（三）--hooks组件

1、useState(init)：返回值[val,fun]

import { useState } from 'react'
let [num, setNum] = useState(0)
// 常见写法
useState(0)
// 初始值比较复杂时
useState(()=>{return })
setNum(10)
// 获取更新前数据
setNum(pre => {
   return pre + 1
})

• 与类组件的setState()不同，不支持部分修改；所以推荐每个变量对应一个useState；
• 18中都是异步，多次fun会统一渲染；
• 16版本中，也与setState一致，多次执行时，在合成事件、周期函数中是异步渲染（react处理），在其他异步操作中：如定时器、手动事件绑定等没有react干预是依次同步渲染；
• 特别地，自带优化，当修改的值与之前的值一样时（Object.is），不重新渲染；

// useState返回值是一个数组[0,fun]，用解构接收，其中方法传参就是修改后的值
import { useState } from 'react'
  let [num, setNum] = useState(0)//num:0
  const handle = () => {
    setNum(10)// num:10
  }
// 多个变量分开，便于维护
 const [num0, setNum0] = useState(10)
 const [num1, setNum1] = useState(10)

• 如何实现循环渲染：fun的传参：

    for (let i = 0; i < 10; i++) {
      setNum(pre => {
        return pre + 1
      })
    }
// 类组件中setState循环
  state = {
    num: 0,
  }
  handle = () => {
    for (let i = 0; i < 10; i++) {
      this.setState(pre => {
        return { num: pre.num + 1 }
      })
    }
  }

• 初始值使用函数：当初始值比较复杂时使用

// 初始值使用函数返回，可以避免多次渲染时重复执行初始化过程
const [num0, setNum0] = useState(()=>{return})

2、useEffect(callback,[依赖项])

• 写法1：useEffect(() => {})，相当于componentDidMount、componentDidUpdate
• 写法2：useEffect(() => {},[])，只相当于componentDidMount，状态更新不执行
• 写法3：useEffect(() => {},[num])，同1，需要在num状态更新时才执行；
• 写法4：useEffect(() => { return （）=>{}})，相当于执行上一次组件销毁前钩子componentWillUnmount，首次渲染不执行；
• 写法5：useEffect(() => { return （）=>{}},[])，无效
• 写法6：useEffect(() => { return （）=>{}},[num])，同4，在执行依赖项改变时有效；

import { useState, useEffect } from 'react'  
  useEffect(() => {
    console.log('钩子：', props)
  },[])
  useEffect(() => {
    return () => {
      console.log('钩子：', props)
    }
  },[])