hooks的常用Api

Ref Hook

• Ref Hook可以在函数组件中存储/查找组件内的标签或其他数据
• 语法：const refContainer = useRef()
• 获取值 refContainer .current.value
• 作用：保存标签对象，功能与React.creatRef()一样

Effect Hook

1、Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）

2、React中副作用操作：

• 发ajax请求数据获取
• 设置订阅/启动定时器
• 手动更改真实DOM

3、语法和说明

useEffect(()=>{
  //在此可以执行任何带副作用操作
  return()=>{
    // 在组件卸载前执行
  }
},[stateVlaue])  //如果指定的是[],回调函数只会在第一次render()后执行

4、可以把 uerEffect Hook 看做如下三个函数的组合

• componentDidMount()
• componentDidUpdate()
• conponentWillUnmount()

State Hook

1、作用： State Hook让函数组件也可以有state状态，并进行状态数据的读写操作
2、语法：const [xxx, setXxx] = React.useState(initValue)
3、userState()说明：
参数：第一次初始值指定的值在内部作缓存
返回值：包含2个元素的数组，第一个为内部当前状态值，第2个为更新状态值的函数
4、setXxx()2种写法：
setXxx(newValue)：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
setXxx(vlaue=>newValue):参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值
5、【补】setXxx列子 ——注意复合数据类型的引用，引用未更新，不会渲染。
const [num, setNum] = useState({a:1})
setNum({ ...num, ...{arr:[4,5,6]}}) 扩展运算符修改值
setNum(Object.assign({},num,{arr:[3,4,5]})) Object.assign()

例子

import React,{Fragment} from 'react';
import ReactDom from 'react-dom';

//Fragment问答ing碎片 只有一个key属性
function Demo() {
  console.log('我执行了')
  const [count, setCount] = React.useState(0);

  const myRef = React.useRef()

  // React.useEffect(() => {
  //   // 数组中不写东西就相当于DidMount
  //   let time = setInterval(() => {
  //     setCount(count => count + 1)
  //   }, 1000)
  //   return () => {
  //     // return里相当于WillUnmount
  //   clearInterval(time)
  //   }
  // },[])
  
  function add(){
    setCount(count + 1)
    // setCount(count=>count+1)
  }

  function show() {
    alert(myRef.current.value)
  }

  function unMount() {
    ReactDom.unmountComponentAtNode(document.getElementById('root'))
  }

  return (
    <div>
      <input type="text" ref={myRef} /><button onClick={show}>提示</button>
      <br />
      <button onClick={add}>加一</button>{count}
      <button onClick={unMount}>卸载组件</button>
      <hr />
    </div>
  )
}

export default Demo

useContext

// 孙组件代码,父组件传值与context代码一致
import { useEffect,useContext } from 'react';
import Mycontext from './store'

export default () => {
  const user = useContext(Mycontext);
  useEffect(
    () => {
      console.log(user)
    },[]
  )

  return (
    <>
      b组件
      <br/>
    </>
  )
}