十六、Hooks

一、StateHook

在函数组件中使用state，React.useState

 1 import React from 'react'
 2 
 3 function Demo(){
 4   const [count, setCount] = React.useState(0)
 5   
 6   function add(){
 7     // 第一种写法
 8     // setCount(count + 1)
 9     
10     // 第二种写法：函数
11     setCount(count => count + 1)
12   }
13   return(
14       <div>
15         <h2>当前求和为：{count}</h2>
16       <button onClick={add}>点我+1</button>
17     </div>
18   )
19 }
20 export default Demo

二、EffectHook

在函数组件中执行副作用操作，React.useEffect

  • 副作用操作：发送请求、设置订阅/启动定时器、手动更改真实DOM
  • EffectHook等于：
    • componentDidMount
    • componentDidUpdate
    • componentWillUnmount
  • 语法
1 React.useEffect(() => {
2   // 副作用操作：第一次挂载和之后更新都会执行
3   // return返回值：组件卸载前执行，做一些收尾工作，如清除定时器、取消订阅
4 },[]) // 如果指定的是[]，回调函数只会在第一次render后调用

案例

 1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 3 
 4 function Demo(){
 5   const [count, setCount] = React.useState(0)
 6   
 7   React.useEffect(() => {
 8     // 副作用操作
 9     let timer = setInterval(() => {
10       setCount(count => count + 1)
11     },1000)
12     // 返回值：组件卸载前执行，做一些收尾工作，如清除定时器、取消订阅
13     return ()=> {
14       clearInterval(timer)
15     }
16   },[]) // 如果指定的是[]，回调函数只会在第一次render后调用
17   
18   function add(){
19     setCount(count => count + 1)
20   }
21   
22   // 卸载组件的回调
23   function unmount(){
24       ReactDOM.unmountComponentAtNode(
25       document.getElelmentBeId('root')
26     )
27   }
28   return(
29       <div>
30         <h2>当前求和为：{count}</h2>
31       <button onClick={add}>点我+1</button>
32       <button onClick={unmount}>卸载组件</button>
33     </div>
34   )
35 }
36 export default Demo

三、RefHook

标记节点，功能与createRef一样

 1 import React from 'react'
 2 
 3 function Demo(){
 4   const [count, setCount] = React.useState(0)
 5   const myRef = React.useRef()
 6   
 7   function add(){
 8     setCount(count => count + 1)
 9   }
10   function show(){
11     console.log(myRef.current.value)
12   }
13   return(
14       <div>
15       <input type="text" ref={myRef}/>
16         <h2>当前求和为：{count}</h2>
17       <button onClick={add}>点我+1</button>
18       <button onClick={show}>点我提示数据</button>
19     </div>
20   )
21 }
22 export default Demo

 

 

posted @ 2021-07-12 16:41  大米饭盖饭  阅读(57)  评论(0)    收藏  举报