hook和Fragment

2.hook和Fragment

2.1 hook

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()一样

类式组件的一般写法：

class Demo extends Component {

    componentDidMount() {
      this.timer =  setInterval(()=>{
           this.setState(state=>({count:state.count+1}))
        },1000)
    }

    state = {count:0}

    myRef = React.createRef()

    show = () => {
        alert(this.myRef.current.value)
    }

    add = () => {
        this.setState(
            state=>({count:state.count+1})
        )
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    unmount = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }

    render() {
        return (
            <div>
                <input ref={this.myRef} type="text"/>
               <h2>当前求和为：{this.state.count}</h2>
                <button onClick={this.add}>点我+1</button>
                <button onClick={this.unmount}>卸载组件</button>
                <button onClick={this.show}>点击提示</button>
            </div>
        );
    }
}

将上面类式组件的功能和方法用函数式组件表示的话，就需要用到hook了。

function Demo() {

    // 函数组件使用useState使用state,
    // useState返回两个值的数组，第一个为初始化状态的值，第二个为修改状态值的方法
    const [count,setCount] = React.useState(0)

    const myRef = React.useRef()

    // 函数组件使用useEffect模拟生命周期钩子
    // 传入两个参数：第一个为回调函数，组件render时调用，
    // 第二个参数为数组，可不传，不传默认监测所有状态更新调用回调函数，
    React.useEffect(() => {
        console.log('111')
        let timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
        // 返回一个函数，在组件卸载前调用，做一些清除定时器，取消订阅的工作
        return () => {
            clearInterval(timer)
        }
    }, [count]) //指定监测某个状态值，若发生更改，则调用传入的回调函数，
                  // 若为空[],只会在第一次render时调用回调函数
                  // 若不写，则默认监测所有状态更新

    function show() {
        alert(myRef.current.value)
    }

    function add() {
         // setCount(count+1) // 第一种写法
        setCount(count=>count+1)
    }

    function unmount() {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }

    return (
            <div>
                <input ref={myRef} type="text"/>
               <h2>当前求和为：{count}</h2>
                <button onClick={add}>点我+1</button>
                <button onClick={unmount}>卸载组件</button>
                <button onClick={show}>点我提示</button>
            </div>
        );
}

2.2 Fragment

import React, {Component, Fragment} from 'react';

class Demo extends Component {
    render() {
        return (
            // 相当于一个空的父节点、空的父标签，最后不会渲染真实DOM
           <Fragment>
               <input type="text"/>
           </Fragment>
        );
    }
}