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