React函数组件与Hook(3)

useDebugValue

用于将自定义Hook的关联数据显示到调试栏

CustHook.js

import {useRef, useDebugValue} from 'react';

export const useTestDebugValue = arr => {

  const ref = useRef(arr);

  //
  useDebugValue(arr && arr.length > 0 ? 'arr属性不为空' : 'arr数组为空或长度为0');

  return ref;


}

Father.jsx

import React from 'react';
import { useTestDebugValue } from './CustHook';

const Father = () => {

  const ref = useTestDebugValue([]);

  return (
    <div>
      <h1>Father组件: useDebugValue => {ref.current}</h1>
    </div>
  )
}

export default Father

startTransition

在startTransition中包装的更新被作为非紧急的来处理，并且当更紧急的更新(如单击或按键)传入时将被中断。如果一个transition被用户打断(例如，在一行中键入多个字符)，React会抛弃未完成的旧更新任务，并只渲染最新的更新。
Transitions可以保持大多数的交互的快速更新，即使它们导致规模巨大的UI更改。它们还可以让您避免在渲染不相关的内容上浪费时间。

Father.jsx

import {useTransition, useState} from 'react';

import Son from './Son';
/* 
  const [isPending, startTransition] = useTransition();

  isPending返回值: 布尔类型   true： 处于阻塞或暂停状态   false: 处于非阻塞状态

  startTransition： 函数对象  
  ()=>{
    非紧急的任务处理
  }

*/
const Father = () => {

  const [isPending, startTransition] = useTransition('dsafdsfdsa');

  const [queryValue, setQueryValue] = useState('');
  const [queryParams, setQeryParms] = useState('');
  const [isStartTransition, setIsStartTransition] = useState(false);

  const changeTransition = e => {
    console.log('transition=>', e.target.checked);
    setIsStartTransition(!isStartTransition);
  }

  const handleQuery = e => {

    setQueryValue(e.target.value);
     
    if(isStartTransition){
      startTransition(()=>{
        setQeryParms(e.target.value);
      })
    }else setQeryParms(e.target.value);
  
  }

  return (
    <div>
      <h1>Father组件</h1>
      <div className="form-check form-switch">
        <input className="form-check-input" type="checkbox" checked={isStartTransition}  onChange={e=>changeTransition(e)}/> 
        <label className="form-check-label">Transition</label>
      </div>
    
      <div className="mb-3">
        <input type="text" className="form-control" name='account' placeholder="请输入查询字符" onChange={e=>handleQuery(e)} value={queryValue}/>
      </div>

      <hr/>

      {
        isPending ? (<h1 className='h1 text-danger'>查询结果加载中........</h1>) :
        <Son queryValue={queryParams}/>
      }
      
    </div>
  )

}


export default Father;

Son.jsx

import { PureComponent } from 'react'

// 创建 床一个长度为5000 的数组 其元素值都为 0
const queryCount = new Array(5000).fill(0);

const targetValue='asdfghjkl';

class Son extends PureComponent {
  render() {
    let result = this.getQuerySplit();
    console.log('result=>', result, typeof(result));
    let resultType = typeof(result);
    return (

      <ul>
        {
          resultType === 'string' ?
          queryCount.map( (item,idx) => (
            <li key={idx}>{result}</li> 
          ) ) : 
          queryCount.map( (item,idx) => (
            <li key={idx}>
              <span>{result[0]}</span>
              <span style={{fontSize: '30px', color:'red'}}>{this.props.queryValue}</span>
              <span>{result[1]}</span>
            </li> 
          ) )
        }
        
          
        
      </ul>
    )
  }

  getQuerySplit(){
    // 通过属性 获取 查询字符
    let queryChar = this.props.queryValue;
    
    // 检索 传递查询字符是否在targetValue字符串中出现 如果出现则进行targetValue字符串分割
    if(targetValue.indexOf(queryChar) > 0){
      let queryCharArray = targetValue.split(queryChar);
      return queryCharArray;
    }else{
      return targetValue;
    }
  }


}

export default Son;

useDeferredValue

useDeferredValue: 将某个状态数据值进行延迟处理

const deferredValue = useDeferredValue(value);

useDeferredValue 技术实现通过 startTransition 函数完成

作用： 延时监听输入/计算 最终的数据值

Father.jsx:

import {useDeferredValue, useState} from 'react';

import Son from './Son';
/* 
useDeferredValue: 将某个状态数据值进行延迟处理

const deferredValue = useDeferredValue(value);
useDeferredValue 技术实现通过 startTransition 函数完成
作用： 延时监听输入/计算 最终的数据值
*/
const Father = () => {

  const [queryParams, setQeryParms] = useState('start:');
  const [isDefferred, setIsDefferred] = useState(true);

  // 使用 useDeferredValue 函数将 queryParams 属性对象变成 延迟变化的数据值
  const deferredValue = useDeferredValue(queryParams);
     
  const changeTransition = e => {
    console.log('isDefferred =>', e.target.checked);
    setIsDefferred(!isDefferred);
    setQeryParms(queryParams =>'start:');

  }

  const handleQuery = e => {

    setQeryParms(e.target.value);

  }

  return (
    <div>
      <h1>Father组件: {isDefferred? 'DeferredValue': 'not DeferredValue'}</h1>
      <div className="form-check form-switch">
        <input className="form-check-input" type="checkbox" checked={isDefferred}  onChange={e=>changeTransition(e)}/> 
        <label className="form-check-label">DeferredValue延迟数据值</label>
      </div>
    
      <div className="mb-3">
        <input type="text" className="form-control" name='account' placeholder="请输入查询字符" onChange={e=>handleQuery(e)} value={queryParams}/>
      </div>

      <hr/>
     
     {
       isDefferred ? <Son queryValue={deferredValue}/> : <Son queryValue={queryParams}/> 
     }
        
       
    </div>
  )

}


export default Father;

Son.jsx:

import { memo, useState, useEffect } from 'react'


const Son = props => {

  // 记录 Son 组件 更新的次数
  const [count, setcount] = useState(0);

  // 渲染列表的数组
  const [list, setlist] = useState([]);

  useEffect(() => {
    
    /*
     每次更新(重新执行useEffect);
     setState(preState => { return preState + 1 });

     preState: 本次更新之前的state 数据值 
    */
    setcount(count=>count+1);
    // setCount(count+1);

    // 每次重新执行 useEffect 函数时 都会重新创建一个新的数组
    setlist( Array(5000).fill(0).map( item=> ({text: props.queryValue})));
    
  }, [props.queryValue]);
  

  return (
    <div>
      <p className='h3 text-danger'>
        {'更新' + count + '次'}
      </p>
      <ul>
        {
          list.map((item, idx) => <li key={idx}>text:{item.text}</li>)
        }
      </ul>
    </div>
  );
  }
  
export default memo(Son);