react - Hooks

1.useEffect

import React,{useEffect,useState} from 'react'
export default function App() {
  const [count,setCount] = useState(0)
  useEffect(() => {
    // 如果是一个空数组 就表示谁都不依赖  那么就只会在第一次加载的时候执行一次
    // 当添加了依赖的时候 就会在count变化的时候 实行监听
    console.log('修改dom')
  },[count])

  return (
    <div>
      <p>{count}</p>
      <p onClick={ e => setCount(count + 1) }>+1</p>
    </div>
  )
}

useContext

import React, { useContext } from "react";


const TestContext = React.createContext({});

const Navbar = () => {
  const { username } = useContext(TestContext)

  return (
    <div className="navbar">
      <p>{username}</p>
    </div>
  )
}

const Messages = () => {
  // 由父组件提供出来的TestContext 在子组建里就可以共享数据了
  const { username } = useContext(TestContext)

  return (
    <div className="messages">
      <p>1 message for {username}</p>
    </div>
  )
}

function App() {
  return (
    <TestContext.Provider value={{ username: '天津' }}>
      <div className="test">
        <Navbar />
        <Messages />
      </div>
    </TestContext.Provider>
  )
}

export default App

2.useReducer

import React , {useReducer} from 'react'
export default function App() {
  function reducer(state,action) {
    switch (action.type) {
      case 'add':
        return {...state,count:state.count + 1}
      case 'mult':
        return {...state,count:state.count - 1}
      default:
        return state
    }
  }

  // 通过一个函数来管理对象
  const [state,dispatch] = useReducer(reducer,{count:1})
  return (
    <div>
      {state.count}
      <p onClick={e => dispatch({type:'add'})}>+1</p>
      <p onClick={e => dispatch({type:'mult'})}>-1</p>
    </div>
  )
}

useRef

import React,{useRef} from 'react'

export default function App() {
  const titleRef = useRef()
  const inputRef = useRef()
  function showDOM() {
    // 获取到dom元素
    titleRef.current.innerHTML = 'sss'
    inputRef.current.value = 's'
  }
  return (
    <div>
      <h3 ref={titleRef}>app</h3>
      <input type='text'  ref={inputRef}   />
      <button onClick={showDOM}>获取</button>
    </div>
  )
}

forwardRef 获取到子组件元素

import React, { forwardRef, useRef } from 'react'

// 通过 forwardRef来得到 子组件元素的dom
const ChildComponent = forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <input type='text' id='text' />
      <button className='button'>button</button>
    </div>
  )
})



export default function App() {
  const inputRef = useRef()
  return (
    <div>
      <ChildComponent ref={divRef} />
      <button onClick={e => { console.log(divRef) }}>获取</button>
    </div>
  )
}

useImperativeHandle 的使用

import React, { forwardRef, useRef,useImperativeHandle } from 'react'

// useImperativeHandle 避免过多的ref给父组件 使用useImperativeHandle来封装
const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef()
  const inputRef2 = useRef()
  useImperativeHandle(ref,() => ({
    focus:() => {
      inputRef.current.focus()
    },
    a(){
      console.log('a',inputRef2)
    }
  }),[])
    return (
      <div>
        <input type='text' ref={inputRef}/>
        <input type='text' id='89' ref={inputRef2}/>
      </div>
    )
})

export default function App() {
  const ChildCom = useRef()
  setTimeout(() => {
     try {
      console.log(ChildCom.current.a(),'ssp')  //第二次可以获取得到
     } catch (error) {
      console.log(error)
     }
  }, 0);
  return (
    <div>
      {/* 这里的ref只要写一个 这个ChildCom 就可以获取到ChildComponent组件 
再根据组建内部的定义来操作 */}
      <ChildComponent ref={ChildCom} />
      {/* 在点击事件里可以访问得到 */}
      <button onClick={e => 
            { 
                ChildCom.current.focus(); 
                ChildCom.current.a(); 
                console.log(ChildCom,'ss') 
            }
        }>
            获取</button>
    </div>
  )
}

useMemo

import React, { useState,useMemo } from "react";


// function Button({ name, children }) {
//   function changeName(name) {
//     console.log('11')
//     return name + '改变name的方法'
//   }

//   const otherName =  changeName(name)
//   return (
//       <>
//         <div>{otherName}</div>
//         <div>{children}</div>
//       </>

//   )
// }

// 优化之后的子组件
function Button({ name, children }) {
  function changeName(name) {
    console.log('11')
    return name + '改变name的方法'
  }
// 做到了 那是不是就避免了组件的二次渲染。达到了优化性能的目的   避免子组件的二次渲染
const otherName =  useMemo(()=>changeName(name),[name])
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>

  )
}



function App() {
  const [name, setName] = useState('名称')
  const [content,setContent] = useState('内容')
  return (
      <>
        <button onClick={() => setName(new Date().getTime())}>name</button>
        <button onClick={() => setContent(new Date().getTime())}>content</button>
        <Button name={name}>{content}</Button>
      </>
  )
}

export default App