接着上篇讲 react hook

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。可以声明很多个
  const [count, setCount] = useState<number>(0); // 数组解构,在typescript中使用，我们可以用如下的方式声明状态的类型
  const [fruit, setFruit] = useState<string>('banana');

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>// 修改 count 的值
        Click me
      </button>
    </div>
  );
}
复制代码

function Box() {
  const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 });
    useEffect(() => {
    function handleWindowMouseMove(e) {
      // 展开 「...state」 以确保我们没有 「丢失」 width 和 height
      setState(state => ({ ...state, left: e.pageX, top: e.pageY }));
    }
  });// 没有第二个参数，只会渲染一次，永远不会重复执行
}
复制代码

const [state, setState] = useState(() => {
  return  doSomething(props);
});
复制代码

infos.forEach((el) => {
  if( list.has(el.id）){
    setList(list.delete(item.id))// 这里是异步，在你循环的时候，页面还没有重绘，拿不到最后一个值
    }
  })
复制代码

  infos.forEach((el) => {
    if (list.has(el.id)) {
      list = list.delete(el.id)//这里是同步删除
    }
  })
  setList(list)//删除完了之后，在去修改DOM的结构
复制代码

const initialState = {count: 0};

// 多个 useState 结合成一个了
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

复制代码

  const [debounceVal, setDebounceVal] = useState(value)
  useEffect(() => {
    const handle = setTimeout(() => {
      setDebounceVal(value)
    }, delay)
    return () => {
      clearTimeout(handle) // 组件销毁的时候清空定时器
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value])
  return debounceVal
复制代码

function App() {
  const [num, setNum] = useState(0);

  // 一个非常耗时的一个计算函数
  // result 最后返回的值是 49995000
  function expensiveFn() {
    let result = 0;

    for (let i = 0; i < 10000; i++) {
      result += i;
    }

    console.log(result) // 49995000
    return result;
  }

  const base = expensiveFn();
  //  const base = useMemo(expensiveFn, []); 只有在第一次点击的时候才会执行，后来都不执行了,他的第二个参数和useEffect一样的意思

  return (
    <div className="App">
      <h1>count：{num}</h1>
      <button onClick={() => setNum(num + base)}>+1</button>
    </div>
  );
}
复制代码

  const handleIndicator = useCallback((indicator: EvaluateIndicator) => {
    console.log('传给字组件')
  }, [])
复制代码

import React, { useState, useCallback } from 'react'
import { debounce } from '../../utils/tool'

import './index.scss'
interface searchlParams {
  handleSearch: (val: string) => void
}
const Search: React.FC<searchlParams> = ({ handleSearch }) => {
  const [value, setValue] = useState<string>('')
  /* 防抖的另外一种写法 */
  const debounceSearch = useCallback(
    debounce((val) => handleSearch(val), 2000),
    [],
  )
  const changhandleSearch = (e: any) => {
    setValue(e.target.value)
    debounceSearch(e.target.value)
  }
  return (
    <div className="search-wrapper">
      <input className="input-control" value={value} onChange={changhandleSearch} placeholder="搜索" />
    </div>
  )
}
复制代码

//子组件

function Child(props) {
  console.log(props.name)
  return <h1>{props.name}</h1>
}

export default React.memo(Child)

// 父组件
function App() {
  const [count, setCount] = useState<number>(1)

  return (
    <div className="App">
      <h1>{ count }</h1>
      <button onClick={() => setCount(count+1)}>改变数字</button>
      <Child name="sunseekers"></Child>
    </div>
  );
}
复制代码

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
复制代码

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

export function useFriendStatus(fn, dependencies) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)

  // 请求的方法 这个方法会自动管理loading
  const request = useCallback(() => {
    setLoading(true)
    setData(fn)
    setLoading(false)
  })
  // 根据传入的依赖项来执行请求
  useEffect(() => {
    request()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dependencies])

  return {
    // 请求获取的数据
    data,
    // loading状态
    loading,
    // 请求的方法封装
    request,
  }
}

// 组件中使用
const { data, loading } = useFriendStatus(fetchTodos({ tab: 'activeTab' }), 'activeTab')

复制代码

//@ts-ignore
import React, { useState, useEffect } from 'react'
export default function useDebounce(value, delay) {
  const [debounceVal, setDebounceVal] = useState(value)
  useEffect(() => {
    const handle = setTimeout(() => {
      setDebounceVal(value)
    }, delay)
    return () => {
      clearTimeout(handle)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value])
  return debounceVal
}
// 组件中使用
interface searchlParams {
  handleSearch: (val: string) => void
}
const Search = ({ handleSearch:searchlParams }) => {
  const [value, setValue] = useState<string>('')
  // 函数防抖,每一次内部变量变化都会注册和执行setTimeout，函数重新渲染之后
  const debounceSearch = useDebounce(value, 2000)
  useEffect(() => {
    handleSearch(value)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debounceSearch])

  return (
    <div className="search-wrapper">
      <input className="input-control" value={value} onChange={(e) => setValue(e.target.value)} placeholder="搜索" />
      {/* <i className="iconfont ico search-ico">&#xe6aa;</i> */}
    </div>
  )
}
复制代码