• React---新扩展Hooks和Fragment


    一、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 }
     
  • 相关阅读:
    142. 环形链表 II
    59. 螺旋矩阵 II
    996. 正方形数组的数目
    1323. 6 和 9 组成的最大数字
    面试题 17.14. 最小K个数
    389. 找不同
    1103. 分糖果 II
    背景透明度
    css3-新属性-用户界面
    响应式布局-基础结构
  • 原文地址:https://www.cnblogs.com/le220/p/14715729.html
Copyright © 2020-2023  润新知