react-5-React-Hooks

React Hooks

REACT提供的HOOKS函数，目的是谁让函数式组件能够拥有类似与类组件的一些效果
=> useState在函数式组件中应用状态
=> useEffect 拥有生命周期
=> useReducer 让其能够向redux一样的管理状态
...

useState

import React, { useState } from 'react';
import PropTypes from 'prop-types'

const Test = (props) => {
    // 需要管控多个状态,我们可以采取的是一个变量存储对象的格式来处理
    let [state, changeNum] = useState({
        supNum: props.supNum,
        oppNum: props.oppNum
    })
    console.log(state)

    return (
        <div style={{ paddingTop: '50px' }}>
            <i>supNum:{state.supNum}</i>
            <br />
            <i>oppNum:{state.oppNum}</i>
            <br />

            <button onClick={_ => {
                changeNum({
                    ...state, // 先把数据拿到再修改
                    supNum: ++state.supNum
                })
            }}>supNum</button>
            <button onClick={_ => {
                changeNum({
                    ...state, // 先把数据拿到再修改
                    oppNum: ++state.oppNum
                })
            }}>oppNum</button>
        </div>
    );
}
// 设置规则验证
Test.propTypes = {
    supNum: PropTypes.number.isRequired,
    oppNum: PropTypes.number.isRequired
}

export default Test;

useEffect

import React, {useState, useEffect, useRef, useReducer} from 'react';
const Test = (props) => {
  // 需要管控多个状态,我们可以采取的是一个变量存储对象的格式来处理
  let [state, changeNum] = useState({
    supNum: props.supNum,
    oppNum: props,oppNum
  })

  // 生命周期函数
  // 第一次和每次更新都会触发
  // useEffect(() => {
  //   console.log('ok')
  // })

  // useEffect(() => {
  //   console.log('只初始化更新')
  // }[])

  useEffect(() => {
    console.log('依赖supNum更新')
  }[supNum])
    

  return ( 
    <div>
     <buttom onClick={_ => {
       // 和setstate不一样的地方,它不能实现局部状态更新,每一次更新都是把之前的值改成一个信值,在修改前先把之前的值克隆一份 
       changeNum({
         ...state, // 先把数据拿到再修改
         supNum: ++state.supNum
       })
     }}></buttom>
    </div>
  );
}
export default Test;

useRef

import React, {useState, useEffect, useRef, useReducer} from 'react';
const Test = (props) => {
  // 需要管控多个状态,我们可以采取的是一个变量存储对象的格式来处理
  let [state, changeNum] = useState({
    supNum: props.supNum,
    oppNum: props,oppNum
  })

  // => 让其可以操作DOM
  let num = useRef()

  return ( 
    <div>
      <h4 ref={num}>
        {supNum}
      </h4>
      <buttom onClick={_ => {
        // 和setstate不一样的地方,它不能实现局部状态更新,每一次更新都是把之前的值  改成一个信值,在修改前先把之前的值克隆一份 
        changeNum({
          ...state, // 先把数据拿到再修改
          supNum: ++state.supNum
        })
      }}></buttom>

       <buttom onClick={_ => {
        //  获取DOM元素
         console.log(num.current)
      }}></buttom>
    </div>
  );
}
export default Test;