一、react-hooks（useState、useRef、forwardRef）

一、useState

注意事项：

1.setState的方法并不像函数式组件会自动合并，所以需要我们通过展开运算符手动合并。

  // 更新方式1：展开运算符
        // const info={...userInfo,...data}
        // setUserInfo(info)
        // 方式2：
        setUserInfo(Object.assign({},userInfo)
        )

2.setState中的更新并不能拿到最新的值，如果需要可以通过在useEffect中获取更新后的值。

  但是这里也会有一个问题就是如果setState更新的动作也是在useEffect中操作，那可能也还是拿不到，可能就需要根据具体业务场景解决。

3.更新不及时的问题：

解决方式式通过函数式的方式进行赋值更新。函数体内可以实现想要的代码逻辑赋值，比如加两次等。

    const oddAdd=()=>{
        // 问题：只会加一次
        // setCount(count+1)
        // setCount(count+1)
        // 解决：
        setCount (()=>{
          return  count+1
        });
    }

4.useState严禁出现在代码块内，最好写到函数的起始位置方便阅读。

5.实现强制刷新。只需要给useState重新赋一次值即可。

 const [,forceUpdate]=useState({})
 const onRefresh=()=>{
        forceUpdate({})
    }
  return (
        <div className="App">
            <header className="App-header">
                <button onClick={onRefresh}>点我强制刷新</button>
            </header>
        </div>
    )

6.异步更改，多个状态的更改会合并，如果不能信任之前的状态，应该使用回调函数的方式改变状态。

二、useRef

作用：1.获取子组件或dom节点的实例对象；

import React,{useRef} from "react";
function App(){
   const inputRef=useRef(null)
    const onButtonClick=()=>{
        if(inputRef){
            inputRef.current.focus()
        }
    }
    return (
        <div className="App">
          <input type="text" ref={inputRef} />
          <button onClick={onButtonClick}>点击获得焦点</button>
        </div>
    )
}
export default App;

2.存储渲染周期之间的共享数据

利用useRef获取上一轮的props或状态

import React,{useState,useRef, useEffect} from "react";
function App(){
    const [count,setCount]=useState(0);
   // 定义一个ref实例对象
   const prevCountRef=useRef();
   // 将prevCountRef实例对象的值赋值给常量prevCount
   const prevCount=prevCountRef.current
   // useEffect中将任意元素中的值等于count的元素绑定为prevCountRef对象
   useEffect(()=>{
    (prevCountRef as any).current=count
   })
    return (
        <div className="App">
         <h1>现在的值：{count};之前的值：{prevCount}</h1>
          <button onClick={()=>setCount((count=>count+1))}>增加</button>
        </div>
    )

}
export default App;

 定时器存入useRef中，定时可id可以在整个组件内使用。（不知道怎么用的其实，没有明白使用场景）

import React,{useState,useRef, useEffect} from "react";
function App(){
   const intervalRel=useRef('')
   useEffect(()=>{
    const id=setInterval(() => {
        
    }, 500);
    intervalRel.current=id
    console.log(intervalRel)

    return ()=>{
        clearInterval(intervalRel.current)
    }
   })
    return (
        <div className="App">
        <h2>111</h2>
        </div>
    )

}
export default App;

useRef使用注意事项：

1、useRef的每次渲染，返回值都不变

2.ref.current发生拜年话并不会造成重新渲染

3.不可以在render里面更新ref.current的值

4.ref.current的值不可作为其他hooks的依赖项，因为ref是可变的，不会使页面再次渲染，react不会跟踪ref的变化。

5.不要在render函数中更新ref.current的值

三、forwardRef

需求：父组件中获取某个子组件中的input元素，然后设置使input获取焦点。

import React,{useState,useRef,forwardRef, useEffect} from "react";
// 子组件
const Child=forwardRef((props,ref)=>{
    console.log('props.ref==>',ref)
    return <>
    <input type="text" placeholder={props.placeholder} ref={ref}/>
    </>
})
// 父组件
function App(){
   const ref=useRef(null)
   const [placeholder,setPlaceHolder]=useState('请输入搜索内容')
   const onClick=()=>{
    console.log('获取到的子组件内容',ref.current.value)
    ref.current.focus()

   }
    return (
        <div className="App">
         <Child ref={ref} placeholder={placeholder}></Child>
         <button onClick={onClick}>获取子组件内容</button>
        </div>
    )

}
export default App;