react常用的hook

useContext:

useContext是跨函数组件传值，显示声明一个createContext为一个变量然后再用Context.provider表签包裹根元素，标签属性value为传参的值，在接受组件中声明一个count=useContext(Context)就可以接受count 的值啦

import { useState, createContext, useContext } from 'react'

const Context = createContext()
// useContext是跨函数组件传值，显示声明一个createContext为一个变量然后再用Context.provider表签包裹根元素，标签属性value为传参的值，在接受组件中声明一个count=useContext(Context)就可以接受count 的值啦

function ConA() {
  const count = useContext(Context)
  return (
    <div>
      我是组件ConA----{count}
      <ConC />
    </div>
  )
}


function ConC() {
  const count = useContext(Context)
  return (
    <div>我是ConC---{count}</div>
  )
}



function App15() {
  const [count, setCount] = useState(10)
  return (
    <Context.Provider value={count}>
      <div>
        <ConA />
        <button onClick={() => setCount(count + 1)}>+1</button>
      </div>
    </Context.Provider>
  )
}
export default App15

 useRef:

绑定useRef（null）属性，绑定组件或者标签为ref属性，然后再useEffect

// 中打印或者输出hRef.current

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


class ConA extends React.Component {
  render() {
    return (
      <div>
        类组件
      </div>
    )
  }
}
// 绑定useRef（null）属性，绑定组件或者标签为ref属性，然后再useEffect
// 中打印或者输出hRef.current
function Ref1() {
  const conRef = useRef(null)
  const hRef = useRef(null)
  // console.log(conRef, hRef)
  // useEffect是在渲染之后执行的函数。
  useEffect(() => {
    console.log(conRef.current, hRef.current)
  }, [])
  return (
    <div>
      <ConA ref={conRef} />
      <h1 ref={hRef}>您好呀</h1>
    </div>
  )
}
export default Ref1