首页 > 其他分享> 文章详细

React---新扩展Hooks和Fragment

2021-05-10 22:02:15 阅读：182 来源： 互联网

标签：count --- Fragment React Hook state 状态值组件

一、Hooks

1. React Hook/Hooks是什么?

　　(1). Hook是React 16.8.0版本增加的新特性/新语法　　(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

2. 三个常用的Hook

　　(1). State Hook: React.useState() 　　(2). Effect Hook: React.useEffect() 　　(3). Ref Hook: React.useRef()

3. State Hook

　　(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作　　(2). 语法: const [xxx, setXxx] = React.useState(initValue) 　　(3). useState()说明: 参数: 第一次初始化指定的值在内部作缓存返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数　　(4). setXxx()2种写法: 　　setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值　　setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

4. Effect Hook

　　(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子) 　　(2). React中的副作用操作: 发ajax请求数据获取设置订阅 / 启动定时器手动更改真实DOM 　　(3). 语法和说明: 　　 useEffect(() => { 　　 // 在此可以执行任何带副作用操作　　return () => { // 在组件卸载前执行　　// 在此做一些收尾工作, 比如清除定时器/取消订阅等　　} 　　}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行　　(4). 可以把 useEffect Hook 看做如下三个函数的组合　　componentDidMount() 　　componentDidUpdate() 　　componentWillUnmount()

5. Ref Hook

　　(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据　　(2). 语法: const refContainer = useRef() 　　(3). 作用:保存标签对象,功能与React.createRef()一样

6.代码

 1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 3 
 4 //类式组件
 5 /* class Demo extends React.Component {
 6 
 7     state = {count:0}
 8 
 9     myRef = React.createRef()
10 
11     add = ()=>{
12         this.setState(state => ({count:state.count+1}))
13     }
14 
15     unmount = ()=>{
16         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
17     }
18 
19     show = ()=>{
20         alert(this.myRef.current.value)
21     }
22 
23     componentDidMount(){
24         this.timer = setInterval(()=>{
25             this.setState( state => ({count:state.count+1}))
26         },1000)
27     }
28 
29     componentWillUnmount(){
30         clearInterval(this.timer)
31     }
32 
33     render() {
34         return (
35             <div>
36                 <input type="text" ref={this.myRef}/>
37                 <h2>当前求和为{this.state.count}</h2>
38                 <button onClick={this.add}>点我+1</button>
39                 <button onClick={this.unmount}>卸载组件</button>
40                 <button onClick={this.show}>点击提示数据</button>
41             </div>
42         )
43     }
44 } */
45 
46 function Demo(){
47     //console.log('Demo');
48 
49     const [count,setCount] = React.useState(0)
50     const myRef = React.useRef()
51 
52     React.useEffect(()=>{
53         let timer = setInterval(()=>{
54             setCount(count => count+1 )
55         },1000)
56         return ()=>{
57             clearInterval(timer)
58         }
59     },[])
60 
61     //加的回调
62     function add(){
63         //setCount(count+1) //第一种写法
64         setCount(count => count+1 )
65     }
66 
67     //提示输入的回调
68     function show(){
69         alert(myRef.current.value)
70     }
71 
72     //卸载组件的回调
73     function unmount(){
74         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
75     }
76 
77     return (
78         <div>
79             <input type="text" ref={myRef}/>
80             <h2>当前求和为：{count}</h2>
81             <button onClick={add}>点我+1</button>
82             <button onClick={unmount}>卸载组件</button>
83             <button onClick={show}>点我提示数据</button>
84         </div>
85     )
86 }
87 
88 export default Demo

二、Fragment

1.作用：可以不用必须有一个真实的DOM根标签了

2.代码

 1 import React, { Component,Fragment } from 'react'
 2 
 3 export default class Demo extends Component {
 4     render() {
 5         return (
 6             <Fragment key={1}>
 7                 <input type="text"/>
 8                 <input type="text"/>
 9             </Fragment>
10         )
11     }
12 }

标签：count,---,Fragment,React,Hook,state,状态值,组件
来源： https://www.cnblogs.com/le220/p/14715729.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9