React第四天——hooks

Hooks基本介绍

hooks是react 16.8的新增特性，它可以让你在不编写class的情况下使用state以及其他react特性

hooks出现，解决了如下一些问题

• 告别令人疑惑的生命周期
• 告别烦人的this
• 告别繁重的类组件，回归前端程序员更加熟悉的函数

useState 和 useEffect

useState略

useEffect包含以下知识点

• 副作用的概念

  函数分为纯函数和带有副作用函数，

  纯函数：一个确切的参数在你的函数中运行后，一定能得到一个确切的值，例如

  function test(x){
  	return x*2
  }

  如果一个函数中，存在副作用，那我们就称该函数不是一个纯函数，所谓副作用，就是值函数结果不可控， 例如发送网络请求，添加监听事件和取消事件，手动修改dom，我们一般将这些副作用写在生命周期钩子，现在写在useEffect这个hook中

  • 基本使用

    import { useEffect, useState } from "react"

    function App(){
    const [count,setCount] = useState(0)
    useEffect(()=>{
    //书写你要执行的副作用，会在组件渲染完成之后执行
    console.log('useEffect');

    document.title = `你点击了${count}次`

    })
    function handleClick(){
    setCount(count+1)
    }
    return (
    

    
    

    {count}

    
    +1
    
    
    )
    }
    export default App;

• 执行清理操作

  import { useEffect, useState } from "react"

  function App(){
  const [count,setCount] = useState(0)
  useEffect(()=>{
  const timer = setInterval(()=>{
  console.log('effect');
  },1000)
  //在useEffect中，可以返回一个函数，该函数我们称之为清理函数（一般是做清理操作，）
  //该函数会在下一次渲染之后，但在执行副作用操作之前
  return ()=>{
  clearInterval(timer)
  }
  })
  function handleClick(){
  setCount(count+1)
  }
  return (
  

  
  

  {count}

  
  +1
  
  
  )
  }
  export default App;

• 副作用的依赖
  目前，我们的副作用函数都会在渲染后重新执行，有些时候我们需要设置依赖项，传递第二个参数，第二个参数为一个依赖数组

  import { useEffect, useState } from "react"

  function App(){
  const [count1,setCount1] = useState(0)
  const [count2,setCount2] = useState(0)
  const [count3,setCount3] = useState(0)

  useEffect(()=>{
    //第二个参数是一个数组，只有count1发生变化，才会重新执行Effect
    // 如果第二个参数为空，那么将执行一次
    console.log('执行力effect'); 
  },[count1])
  return (
    <div>
      <div>{count1}</div>
      <div>{count2}</div>
      <div>{count3}</div>
      
      <button onClick={()=>setCount1(count1+1)}>+1</button>
      <button onClick={()=>setCount2(count2+1)}>+1</button>
      <button onClick={()=>setCount3(count3+1)}>+1</button>
  
    </div>
  )

  }
  export default App;

自定义Hook

除了官方指定内置的Hook，我们还可以自定义hook，自定义hook本质上就是函数，但和普通函数还是有一点区别的，主要体现在以下两点

• 自定义hook能够调用诸如 useState,useRef等，普通函数则不能，由此可以通过内置的hooks获得Fiber的访问方式，可以实现在组件级别存储数据的方案

• 自定义hook需要以use开头，普通函数则没有这个规则，使用use开头更像是一个约定

  子组件
  import {useState} from 'react'
  function useMyBook(){
  const [bookName,setBookName] = useState('学习Vue')
  return {
  bookName,
  setBookName
  }
  }
  export default useMyBook

  父组件
  import {useState} from 'react'
  import useMyBook from './components/useMyBook.tsx'
  function App(){
  const {bookName,setBookName} = useMyBook()
  const [value,setValue] = useState('')
  function handleChange(e){
  setValue(e.target.value)
  }
  function handleClick(){
  setBookName(value)
  }
  return (
  

  
  

  {bookName}

  
  
  确定
  
  
  )
  }
  export default App