React hook(基本用法)|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第8天

一、简单使用 hook

通过useState()函数创建了 counter 变量 以及 setCounter函数,通过数组解构的方法赋值， useState()里的参数就是counter的初始值,通过setCounter()对counter进行动态的修改

// App.js
import react,{ useState } from "react"
import './App.css'

export default function App() {
  const [counter,setCounter] = useState(0);

  return (
    <div className="home">
      <h1>{counter}</h1>
      <button onClick={e => setCounter(counter+1)}>+1</button>
      <button onClick={e => setCounter(counter-1)}>-1</button>
    </div>
  )
}

效果如下

二、 useState

基本写法

const [state,setState] = useState(initialState);

setState调用

set调用的两种方法

• 1.直接调用: setState(state+1) 直接调用传入的数据
• 2.对于复杂的更新逻辑, setState(() => state +1) 使用箭头函数调用

import react,{ useState } from "react"
import './App.css'
export default function App() {
  const [counter,setCounter] = useState(0);
  const addNumber = () => {
    setCounter(() => {
      if(counter>=3) {
        return counter+2;
      }else {
        return counter+1;
      }
    })
  }
  return (
    <div className="home">
      <h1>{counter}</h1>
      <button onClick={addNumber}>add</button>
      <button onClick={e => setCounter(counter-1)}>sub</button>
    </div>
  )
}

useState() 复杂数据

useState初始化对象，setTrainee里使用es6的对象扩展语法，对新对象进行赋值

import { useState } from "react"
import { Button } from 'antd';
import './App.css'
export default function App() {
  const [trainee,setTrainee] = useState({name:'XukunCai',age:23})
  const changeIfm = () => {
    setTrainee(() => {
      return {
        ...trainee,
        name: '蔡徐坤'
      }
    })
  }
  return (
    <div className="home">
      <div className="trainee">
        <div className="middle">
          <h1>个人练习生:</h1>
          <h2>姓名: {trainee.name}</h2>
          <h2>年龄: {trainee.age}</h2>
          <Button onClick={changeIfm}>change</Button>
        </div>
      </div>
    </div>
  )
}

useState惰性初始化

• initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略
• 处死state需要通过复杂计算获得，则可以传入一个函数
• 如果更新的数据与上次一样，React 将跳过子组件的渲染以及 effect 的执行

三、 useEffect

• useEffect 会在 React在完成对DOM的更新后执行，默认情况下，React会在每次渲染后调用副作用函数(useEffect)，包括第一次渲染的时候
  因此 useEffect可以获取到更新后的数值
• useEffect有两个参数，第一个参数是副作用的处理函数,第二个参数是与该副作用函数关联的状态或属性依赖数组
  • 传入空数组,那么useeffect只会执行一次，(首次执行的时候)
• return 取消监听
  首次执行打印 useEffect 开始监听，下一次执行的时候 先执行 '取消监听' 再进行后续操作

  useEffect(() => {
    console.log('useEffect');
    console.log('开始监听');
    return () => {
      console.log('取消监听');
      
    }
  })
  

四、 useCallback

基本写法,第一个参数是处理函数，第二个参数是一个数组，用于指定被记忆函数更新时所依赖的值

const memosizedCallback = useCallback(
  () => {
    doSomthing(a,b);
  },
  [a,b]
)