Ref Hook
- Ref Hook可以在函数组件中存储/查找组件内的标签或其他数据
- 语法：
const refContainer = useRef() - 获取值
refContainer .current.value - 作用：保存标签对象，功能与React.creatRef()一样
Effect Hook
1. Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）
2. React中副作用操作:
(1). 发ajax请求数据获取 (2). 设置订阅/启动定时器 (3). 手动更改真实DOM
3. 语法和说明
useEffect(()=>{ //在此可以执行任何带副作用操作 return()=>{ // 在组件卸载前执行 } },[stateVlaue]) //如果指定的是[],回调函数只会在第一次render()后执行
4. 可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount() componentDidUpdate() conponentWillUnmount()
State Hook
- 作用： State Hook让函数组件也可以有state状态，并进行状态数据的读写操作
- 语法：
const [xxx, setXxx] = - useState()说明：
参数：第一次初始值指定的值在内部作缓存
返回值：包含2个元素的数组，第一个为内部当前状态值，第2个为更新状态值的函数 - setXxx()2种写法：
setXxx(newValue)：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
setXxx(vlaue=>newValue):参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值 - 【补】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
