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/></>)
}