react hooks初体验

对hooks还不是太熟 记录一下 如有错误 还往指正
react分为函数组件和类组件 函数组件只能展示 有了hooks以后 函数组件也可以做交互了
1.usestate(状态)

function App() {
  const [num, setNum] = useState(0)
  return (
    <div className='App'>
      <p>{num}</p>
        <button
          onClick={() => {setNum(num + 1)}}
        >+1</button>
    </div>
  )
}

2.useEffect (hooks里面的生命周期函数)

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `${count}`;
  });

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

如果同时存在多个 useEffect， 会按照出现次序执行

3 .useLayoutEffect （在浏览器渲染前执行）

function App1() {
    const [n, setN] = useState(0)
    const time = useRef(null)
    const onClick = () => {
        setN(i => i + 1)
        time.current = performance.now()
    }
    useLayoutEffect(() => {
        if (time.current) {
            console.log(performance.now() - time.current) //大概是0.7ms
        }
    })
    useEffect(() => {
        if (time.current) {
            console.log(performance.now() - time.current) //大概是2.7ms
        }
    })
    return (
        <div className="App">
            <h1>n: {n}</h1>
            <button onClick={onClick}>Click</button>
        </div>
    );
}

为了用户体验，优先使用 useEffect (优先渲染)

4.useRef （引用普通对象）

import React, {forwardRef, useRef} from 'react';

function App(){
    const buttonRef = useRef(null)
    return (
        <div>
            <Button ref={buttonRef}>按钮</Button2>
        </div>
    )
}
const Button = forwardRef((props, ref) => {
    console.log(ref)  //可以拿到ref对button的引用，forwardRef仅限于函数组件，class 组件是默认可以使用 ref 的
    return <button ref={ref} {...props} />;
})